Switching <img> source after preload complete

[mrtwice99]

Is there any way to switch my images source after an image has loaded completely? I have six pictures that are rather large ( they have to be large) and I would like to set each picture to a small "picture loading" source image. At the same time, I would be preloading the large images. After the images complete loading, I would then like to switch the six images from the first "picture loading" file to the correct preloaded file.

I know how to switch and preload, all I really need to know from you guys is how to tell if an images has been succesfully loaded into the cache. Thank you in advance. :)

[eggman]

One way is:

<IMG SRC="sample.gif" onload="do_something()">

I don't exactly know which browser supports this though.

The image to be loaded also has a property than can be checked but I can't remember the property's name.

[Roy Sinclair]

<img lowsrc="lowresimage" src="highresimage">

Of course I think the "lowsrc" property may not be supported by all browsers but I'd try that before using a scripting option.

[mrtwice99]

Neither of these suggestions would appear to be a solution to my problem.

The onload event fires when the image has completely loaded in an <img> tag. However, when it is used in javascript code it fires immedietly after I set the src property.

image1 = new Image();
image1.src = strDirectory + "/pic1.jpg";
image1.onLoad = alert("wow");


The alert is displayed immedietly, even before the picture has completely loaded.

The second suggestion will not work because I am dynamically changing the source of the original image. lowsrc would only work the first time, not each time the picture changes. Any more suggestions?

[cheesebagpipe]

You're doing three things wrong: setting the .src before assigning the onload handler, intercapitalizing 'onload', and, more importantly, assigning a function call, not an object (or a 'wrapper', as below), to the handler;

image1 = new Image();
image1.onload = function() { alert("wow"); };
image1.src = strDirectory + "/pic1.jpg";

Try this:

<script type="text/javascript" language="javascript">

var image1 = new Image();
image1.onload = function() { document.pic1.src = this.src; };
image1.src = strDirectory + "/pic1.jpg";

</script>
<img name="pic1" src="crappy_placeholder.jpg" />

[mrtwice99]

Thank you all for your help and correction. It now does exactly what I needed it to. :thumbsup:

[mypixnet]

You're doing three things wrong: setting the .src before assigning the onload handler, intercapitalizing 'onload', and, more importantly, assigning a function call, not an object (or a 'wrapper', as below), to the handler;

image1 = new Image();
image1.onload = function() { alert("wow"); };
image1.src = strDirectory + "/pic1.jpg";

Try this:

<script type="text/javascript" language="javascript">

var image1 = new Image();
image1.onload = function() { document.pic1.src = this.src; };
image1.src = strDirectory + "/pic1.jpg";

</script>
<img name="pic1" src="crappy_placeholder.jpg" />


Thanks for your help!