Difference between $(window).load() and $(document).ready() functions
What is the difference between $(window).load(function() {})
and $(document).ready(function() {})
in jQuery?
-
document.ready
is a jQuery event, it runs when the DOM is ready, e.g. all elements are there to be found/used, but not necessarily all content. -
window.onload
fires later (or at the same time in the worst/failing cases) when images and such are loaded, so if you're using image dimensions for example, you often want to use this instead.
$(document).ready(function() {
// executes when HTML-Document is loaded and DOM is ready
alert("document is ready");
});
$(window).load(function() {
// executes when complete page is fully loaded, including all frames, objects and images
alert("window is loaded");
});
The $(window).load()
is NOT available in jQuery 3.0
$( window ).load(function() {
// Handler for .load() called.
});
To get around it, you can use it as an "Event Handler Attachment"
$( window ).on("load", function() {
// Handler for .load() called.
});