jQuery - What are differences between $(document).ready and $(window).load?
$(document).ready(function() {
// executes when HTML-Document is loaded and DOM is ready
console.log("document is ready");
});
$(window).load(function() {
// executes when complete page is fully loaded, including all frames, objects and images
console.log("window is loaded");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Query 3.0 version
Breaking change: .load(), .unload(), and .error() removed
These methods are shortcuts for event operations, but had several API limitations. The event
.load()
method conflicted with the ajax.load()
method. The.error()
method could not be used withwindow.onerror
because of the way the DOM method is defined. If you need to attach events by these names, use the.on()
method, e.g. change$("img").load(fn)
to$(img).on("load", fn)
.1
$(window).load(function() {});
Should be changed to
$(window).on('load', function (e) {})
These are all equivalent:
$(function(){
});
jQuery(document).ready(function(){
});
$(document).ready(function(){
});
$(document).on('ready', function(){
})
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 the 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.
Also read a related question:
Difference between $(window).load() and $(document).ready() functions