Jquery .ready() vs window.onload
60,724
Solution 1
Depends on what you want to do.
- jQuery ready will run your code when the HTML is all ready, but before images and other resources have finished. This is the earliest possible time that you can change the DOM with JavaScript, so it's widely used. (In modern browsers it's replaced by the native event
DOMContentLoaded
). -
window.onload
(theload
event) runs after everything has finished loading. Images, Flash, and some scripts, but usually not stylesheets. Use this for code that should run only when the page won't change any more.
Also, with window.onload
you can only attach one listener, but you can attach as many as you want with jQuery ready. To attach more than one event on window.onload
, use addEventListener
:
window.addEventListener('load', function () {
}, false);
Solution 2
Yes, window.onload allows you to have only one listener. jQuery ready attaches as many listeners as you want.
Solution 3
Windows.onload will wait for everything to load on a page including images. Document.ready will fire as soon as soon as the html is loaded.
Related videos on Youtube
![James](https://i.stack.imgur.com/ZMCFH.png?s=256&g=1)
Comments
-
James over 3 years
Are there any advantages of using the Jquery ready() function over window.onload?
// Jquery ready $(document).ready(function() { }); // window.onload window.onload = function () { }
-
jdonley over 10 yearswell for starters, using the jQuery version won't overwrite other code efforts to attach something to a load state. But in any case,
document.ready
is not the same event aswindow.onload
-
nroose over 8 yearsThis question has a better answer than the one linked to as the original.
-