jQuery document-ready event Difference between $(document).ready() and $(window).load()
Example
$(window).load() was deprecated in jQuery version 1.8 (and completely removed from jQuery 3.0) and as such should not be used anymore. The reasons for the deprecation are noted on the jQuery page about this event
Caveats of the load event when used with images
A common challenge developers attempt to solve using the
.load()shortcut is to execute a function when an image (or collection of images) have completely loaded. There are several known caveats with this that should be noted. These are:
- It doesn't work consistently nor reliably cross-browser
- It doesn't fire correctly in WebKit if the image
srcis set to the samesrcas before- It doesn't correctly bubble up the DOM tree
- Can cease to fire for images that already live in the browser's cache
If you still wish to use load() it is documented below:
$(document).ready() waits until the full DOM is availble -- all the elements in the HTML have been parsed and are in the document. However, resources such as images may not have fully loaded at this point. If it is important to wait until all resources are loaded, $(window).load() and you're aware of the significant limitations of this event then the below can be used instead:
$(document).ready(function() {
console.log($("#my_large_image").height()); // may be 0 because the image isn't available
});
$(window).load(function() {
console.log($("#my_large_image").height()); // will be correct
});
