Some Help

Vinthian

02-07-2007, 03:12 AM

Ok, I know nothing about javascript and I only need one script/code done for me. I'm trying to get a script that'll replace an image's src with a "loading" image while the actual image is loading. My site is http://vinthian.axemwarclan.net/images/

The reason I need this is because some images are very big and take a while to load, so while it's loading, the "Hover to View" would be replaced with, http://vinthian.axemwarclan.net/images/loading.gif and when the browser is done loading the image, it'll show the main image. Once it's done loading, it stays that way until u refresh, it doesn't disappear.

If anyone can offer me some help, it'd be appreciated.
(vinthian at gmail dot com)

tonyp12

02-07-2007, 04:30 AM

Why is the picture only shown after a hover-out (after a onhover)?

Vinthian

02-07-2007, 12:04 PM

it's to save bandwidth. the image doesn't load until u hover over it, and doesn't show until it's done loading. i want it to be replaced with the loading image while it's loading.

tonyp12

02-07-2007, 02:40 PM

and doesn't show until it's done loading.

But it does not show it when it's done loading,
it shows it after it's done loading AND after hover-out.

Vinthian

02-07-2007, 02:48 PM

noo, i mean i want the loading image to be shown before it's done loading, and the main image to be shown after it's done loading.

Hover Image > Mouse Over > Loading Image > Done Loading > Main Image

sry for the confusion :S

tonyp12

02-07-2007, 03:11 PM

I'm not even talking about that step yet.

First you have to fix the that image is shown as soon it's done loading and NOT after it's done loading and hover-out.

test it , put you mouse on top of the box and don't move it.
The picture will not even come up after 1 minute.

Vinthian

02-07-2007, 03:21 PM

hmm, looks like i replaced over with out yesterday, it's fixed now... now how would i go about doing what i was trying to explain?

chump2877

02-07-2007, 06:56 PM

First of all, with all of the mouseover images on your page, I would preload all of those images so they would take less time to load on mouseover...try using something like this in your script to preload images:

if (document.images)
{
var preload_image_object = new Image();
var URL_prefix = 'http://www.yourSite.com/images/';

// set image url
var image_url = new Array();
image_url[0] = URL_prefix+"image1.gif";
image_url[1] = URL_prefix+"image2.png";
image_url[2] = URL_prefix+"image3.png";

for(i=0; i<image_url.length; i++)
{
preload_image_object.src = image_url[i];
}
}Now, as far as replacing the original image with a loading image while the new image loads, give this a try:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" dir="ltr">

<head>

<title>Nav Menu</title>

<style type="text/css">

</style>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

</head>

<body>

<div class="img_div" id="img1" style="display:block;top:50px">
<img class="image" onload="hideWorkingGIF('img1','deathscythe.png');" onmouseover="changeImg('img1',this,'deathscythe.png');" src="http://vinthian.axemwarclan.net/images/default.png" />
</div>

<div class="img_div" id="img2" style="display:block;top:250px">
<img class="image" onload="hideWorkingGIF('img2','scorpionvsspiderman.png');" onmouseover="changeImg('img2',this,'scorpionvsspiderman.png');" src="http://vinthian.axemwarclan.net/images/default.png" />
</div>

<div class="img_div" id="img3" style="display:block;top:450px">
<img class="image" onload="hideWorkingGIF('img3','gambit.png');" onmouseover="changeImg('img3',this,'gambit.png');" src="http://vinthian.axemwarclan.net/images/default.png" />
</div>

<script type="text/javascript">

</script>

</body>

</html>