Official way to ask jQuery wait for all images to load before executing something

Posted by Simon_Weaver on Stack Overflow See other posts from Stack Overflow or by Simon_Weaver
Published on 2009-02-13T06:56:25Z Indexed on 2010/05/03 17:38 UTC
Read the original article Hit count: 263

Filed under:

In jQuery when you do this:

 $(function() {
    alert("DOM is loaded, but images not necessarily all loaded");
 });

It waits for the DOM to load and executes your code. If all the images are not loaded then it still executes the code. This is obviously what we want if we're initializing any DOM stuff such as showing or hiding elements or attaching events.

Let's say though that I want some animation and I don't want it running until all the images are loaded. Is there an official way in jQuery to do this?

The best way I have is to use <body onload="finished()">, but I don't really want to do that unless I have to.

Note: There is a bug in jQuery 1.3.1 in Internet Explorer which actually does wait for all images to load before executing code inside $function() { }. So if you're using that platform you'll get the behavior I'm looking for instead of the correct behavior described above.

© Stack Overflow or respective owner

Related posts about jQuery