Menu
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.
877
The document. ready() function will be executed as soon as the DOM is loaded. It will not wait for the resources like images, scripts, objects, iframes, etc to get loaded.
To determine whether an image has been completely loaded, you can use the HTMLImageElement interface's complete attribute. It returns true if the image has completely loaded and false otherwise. We can use this with naturalWidth or naturalHeight properties, which would return 0 when the image failed to load.
With jQuery, you use $(document).ready() to execute something when the DOM is loaded and $(window).on("load", handler) to execute something when all other things are loaded as well, such as the images.
The difference can be seen in the following complete HTML file, provided you have a lot of jollyrogerNN JPEG files (or other suitable ones):
<html> <head> <script src="jquery-1.7.1.js"></script> <script type="text/javascript"> $(document).ready(function() { alert ("done"); }); </script> </head><body> Hello <img src="jollyroger00.jpg"> <img src="jollyroger01.jpg"> // : 100 copies of this in total <img src="jollyroger99.jpg"> </body> </html> With that, the alert box appears before the images are loaded, because the DOM is ready at that point. If you then change:
$(document).ready(function() { into:
$(window).on("load", function() { then the alert box doesn't appear until after the images are loaded.
Hence, to wait until the entire page is ready, you could use something like:
$(window).on("load", function() { // weave your magic here. }); I wrote a plugin that can fire callbacks when images have loaded in elements, or fire once per image loaded.
It is similar to $(window).load(function() { .. }), except it lets you define any selector to check. If you only want to know when all images in #content (for example) have loaded, this is the plugin for you.
It also supports loading of images referenced in the CSS, such as background-image, list-style-image, etc.
$('selector').waitForImages(function() { alert('All images are loaded.'); }); Example on jsFiddle.
More documentation is available on the GitHub page.
23
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
