Welcome to WebmasterWorld Guest from

Forum Moderators: open

Message Too Old, No Replies

Confirm javascript-created image has fully downloaded

How can I use javascript to know that a set of images that were created usi



10:14 pm on Mar 31, 2003 (gmt 0)

Inactive Member
Account Expired


How can I use javascript to know that a set of images that were created using the new Img() function have completely downloaded?

If you have ever tried to use javascript to preload a lot of images upon page load, you know that the regular strategy only validates that each download has begun, BUT IS IN NO WAY KNOWING IF THE DOWNLOAD IS COMPLETED.

Here is the common strategy to test that new Img()'s are ready to be used in mouseovers that I am referring to:

<code snip>
var preloadFlag = false;
function preloadImages() {
if (document.images) {
01_over = newImage("images/01_over.gif");
[imagine image 02 thru 19 here]
20_over = newImage("images/20_over.gif");
preloadFlag = true;
</code snip>

If you actually try and preload 20 images like this, the re-assignment of the var preloadFlag to 'true' on the bottom of the function will occur as soon as each 20 new images have been called, even though they ARE NOT DOWNLOADED YET. You can easily test by adding confirm(preloadFlag); to the end of the preloadImages() function. You'll see that javascript does not wait for the new image to download before it goes to the next line in the function

The html <img> tag has an onLoad event handler in javascript, but I can't find anyway to implement such an event handler on an image that is created entirely in javascript using the new Img() function. My only guess is using a setTimeout() function to see if all 20 are avilable, but not sure even how to test for 'downloaded availability

To repeat: How can I know for sure that all 20 images are downloaded and ready for the viewer to mouseover and use, etc.

peace on earth


2:01 am on Apr 1, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:May 26, 2000
votes: 0

Every image tag has these three eventhandlers --

onload is invoked when an image is fully loaded.
onerror is invoked when an image tag refers to a corrupted file
onabort is invoked when the user interrupts the image load.

All three eventhandlers are associated with the image's complete property. Instead of setting a flag after the image is called, I can see testing for image.complete in some fashion. But if you just use the onload handler, the other two situations (corrupted or interrupted download) may trip you up.