homepage Welcome to WebmasterWorld Guest from 54.243.12.156
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor
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
STmindfulORM




msg:1471352
 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

ST(mindful)ORM

 

tedster




msg:1471353
 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.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved