Jquery .ready() vs window.onload

javascript jquery onload
James picture James · Feb 13, 2014 · Viewed 60.3k times · Source

Are there any advantages of using the Jquery ready() function over window.onload?

// Jquery ready
$(document).ready(function() {

});

// window.onload
window.onload = function () {

}

Answer

rvighne picture rvighne · Feb 13, 2014

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 (the load 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);

Related questions

iFrame src change event detection?

Assuming I have no control over the content in the iframe, is there any way that I can detect a src change in it via the parent page? Some sort of onload maybe? My last resort is to do a 1 …

Read More
Trying to fire the onload event on script tag

I'm trying to load a set of scripts in order, but the onload event isn't firing for me. var scripts = [ '//cdnjs.cloudflare.com/ajax/libs/less.js/1.3.3/less.min.js', '//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0-rc.3/…

Read More
Can I call $(document).ready() to re-activate all on load event handlers?

Does anyone happen to know IF and HOW I could re-call all on-load event handlers? I'm referencing some .js files that I DON'T have control over, and these .js libraries do their initialization in $(document).ready(), and unfortunately don't provide …

Read More