homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

Confirm javascript-created image has fully downloaded
How can I use javascript to know that a set of images that were created usi

10+ Year Member

Msg#: 336 posted 10:14 pm on Mar 31, 2003 (gmt 0)

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




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

Msg#: 336 posted 2:01 am on Apr 1, 2003 (gmt 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.

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved