window.onload vs $(document).ready()

window.onload vs $(document).ready()

What are the differences between JavaScript's window.onload and jQuery's $(document).ready() method?

window.onload

$(document).ready()

possible duplicate of $(document).ready equivalent without jQuery
– Kzqai
Mar 15 '15 at 14:34

14 Answers
14

The ready event occurs after the HTML document has been loaded, while the onload event occurs later, when all content (e.g. images) also has been loaded.

ready

onload

The onload event is a standard event in the DOM, while the ready event is specific to jQuery. The purpose of the ready event is that it should occur as early as possible after the document has loaded, so that code that adds functionality to the elements in the page doesn't have to wait for all content to load.

onload

ready

@baptx: You're wrong. The ready event is specific to jQuery. It's using the DOMContentLoaded event if it's available in the browser, otherwise it emulates it. There is no exact equivalent in the DOM because the DOMContentLoaded event is not supported in all browsers.
– Guffa
May 19 '12 at 21:45

ready

DOMContentLoaded

Ok but the same result exists with DOMContentLoaded, maybe you should have specified this
– baptx
May 19 '12 at 21:51

@baptx: I didn't think that it was releveant to the question, and I still don't.
– Guffa
May 19 '12 at 22:07

@baptx not same result, document ready handler will be fired even setted after DOM is effectively ready, using a promise. DOMContentLoaded won't. So document jquery ready handler can really be useful when setted in external script load asynchronously
– A. Wolff
Mar 7 '14 at 12:35

DOMContentLoaded

Why the downvote? If you don't explain what it is that you think is wrong, it can't improve the answer.
– Guffa
Mar 7 '14 at 12:53

window.onload is the built-in JavaScript event, but as its implementation had subtle quirks across browsers (Firefox, Internet Explorer 6, Internet Explorer 8, and Opera), jQuery provides document.ready, which abstracts those away, and fires as soon as the page's DOM is ready (doesn't wait for images, etc.).

window.onload

document.ready

$(document).ready (note that it's not document.ready, which is undefined) is a jQuery function, wrapping and providing consistency to the following events:

$(document).ready

document.ready

document.ondomcontentready

document.ondomcontentloaded

window.onload

There's a slight misconception here: the load event of window is implemented reasonably consistently across browsers. The problem that jQuery and other libraries are trying to solve is the one you mentioned, which is that the load event is not fired until all dependent resources such as images and stylesheets have loaded, which could be a long time after the DOM is completely loaded, rendered and ready for interaction. The event that fires in most browsers when the DOM is ready is called DOMContentLoaded, not DOMContentReady.
– Tim Down
Sep 13 '10 at 8:31

load

window

load

DOMContentLoaded

DOMContentReady

@Tim Down: reasonably is the key word here; at least some object sniffing used to be necessary, even with onload (there are differences wrt FF/IE/Opera). As for the DOMContentLoaded, you are entirely correct. Editing to clarify.
– Piskvor
Sep 13 '10 at 8:44

onload

DOMContentLoaded

What kind of object sniffing do you mean?
– Tim Down
Sep 13 '10 at 8:55

@Tim Down: I know Opera had it, but the event trigger on it was slightly quirky (to trigger reliably, document.onload was usable). As far as the window.onload goes: window.onload = fn1;window.onload=fn2; - only fn2 would get invoked onload. Some free webhosts insert their own code into documents, and sometimes this clobbered the in-page code.
– Piskvor
Sep 13 '10 at 11:06

document.onload

window.onload = fn1;window.onload=fn2;

Isn't writing "document.ready" incorrect? the document object doesn't have a ready method, the jQuery object does that is returned from the $(document) call. Please edit this answer if I'm right because this is very confusing.
– A. Sallai
Mar 6 '14 at 9:10

$(document).ready() is a jQuery event. JQuery’s $(document).ready() method gets called as soon as the DOM is ready (which means that the browser has parsed the HTML and built the DOM tree). This allows you to run code as soon as the document is ready to be manipulated.

$(document).ready()

For example, if a browser supports the DOMContentLoaded event (as many non-IE browsers do), then it will fire on that event. (Note that the DOMContentLoaded event was only added to IE in IE9+.)

Two syntaxes can be used for this:

$( document ).ready(function() { console.log( "ready!" ); });

Or the shorthand version:

$(function() { console.log( "ready!" ); });

Main points for $(document).ready():

$(document).ready()

$

jQuery

$(window).load()

window.onload() is a native JavaScript function. The window.onload() event fires when all the content on your page has loaded, including the DOM (document object model), banner ads and images. Another difference between the two is that, while we can have more than one $(document).ready() function, we can only have one onload function.

window.onload()

$(document).ready()

onload

Minor point: The discussion of IE is poorly worded. It isn't that IE (8 and before) "can't safely fire" until the document's readyState reaches complete, it is that IE lacked a DOMContentLoaded event. Not a matter of "safety", but a missing feature in IE, added in IE 9.
– ToolmakerSteve
Aug 12 '14 at 0:36

You are correct, so I edited the answer to reflect your comment and thanks!
– James Drinkard
May 13 '15 at 22:42

You say "It will not wait for the images to get loaded." what about other files, js most importantly? Often before calling function from another file - I need to know if it is loaded.
– Darius.V
Aug 12 '15 at 9:35

This is another topic altogether, but if I understand what you are asking, it's based on how you structure your page, including what order you place the js files. Here is a link that goes into more detail: ablogaboutcode.com/2011/06/14/… HTH, James
– James Drinkard
Aug 12 '15 at 14:34

Also, its $(document).ready(), not document.ready().
– Undefined
Jan 12 '16 at 19:34

A Windows load event fires when all the content on your page is fully loaded including the DOM (document object model) content and asynchronous JavaScript, frames and images. You can also use body onload=. Both are the same; window.onload = function(){} and <body onload="func();"> are different ways of using the same event.

window.onload = function(){}

<body onload="func();">

jQuery $document.ready function event executes a bit earlier than window.onload and is called once the DOM(Document object model) is loaded on your page. It will not wait for the images, frames to get fully load.

$document.ready

window.onload

Taken from the following article:
how $document.ready() is different from window.onload()

$document.ready()

window.onload()

I think this is the best answer!
– Haoyu Chen
Nov 8 '15 at 20:56

I might agree, if it weren't copied word-for-word.
– Kevin B
Jun 30 '16 at 18:28

A word of caution on using $(document).ready() with Internet Explorer. If an HTTP request is interrupted before the entire document is loaded (for example, while a page is streaming to the browser, another link is clicked) IE will trigger the $(document).ready event.

$(document).ready()

$(document).ready

If any code within the $(document).ready() event references DOM objects, the potential exists for those objects to be not found, and Javascript errors can occur. Either guard your references to those objects, or defer code which references those objects to the window.load event.

$(document).ready()

I have not been able to reproduce this problem in other browsers (specifically, Chrome and Firefox)

Which version of IE? I know I should care about compatibility, but it's hard to with IE. Is it acceptable to use document.ready for just JavaScript?
– mishmomo
Jan 3 '13 at 20:04

IE6, 7, and 8. See: stackoverflow.com/questions/13185689/…
– James Drinkard
Feb 12 '13 at 15:01

Good to know, thanks!
– mkoistinen
Feb 24 '13 at 16:08

$(document).ready(function() { // Executes when the HTML document is loaded and the DOM is ready alert("Document is ready"); }); // .load() method deprecated from jQuery 1.8 onward $(window).on("load", function() { // Executes when complete page is fully loaded, including // all frames, objects and images alert("Window is loaded"); });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

Events

$(document).on('ready', handler) binds to the ready event from jQuery. The handler is called when the DOM is loaded. Assets like images maybe still are missing. It will never be called if the document is ready at the time of binding. jQuery uses the DOMContentLoaded-Event for that, emulating it if not available.

$(document).on('ready', handler)

$(document).on('load', handler) is an event that will be fired once all resources are loaded from the server. Images are loaded now. While onload is a raw HTML event, ready is built by jQuery.

$(document).on('load', handler)

Functions

$(document).ready(handler) actually is a promise. The handler will be called immediately if document is ready at the time of calling. Otherwise it binds to the ready-Event.

$(document).ready(handler)

ready

Before jQuery 1.8, $(document).load(handler) existed as an alias to $(document).on('load',handler).

$(document).load(handler)

$(document).on('load',handler)

function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = func; } else { window.onload = function() { if (oldonload) { oldonload(); } func(); } } } // Example use: addLoadEvent(nameOfSomeFunctionToRunOnPageLoad); addLoadEvent(function() { /* More code to run on page load */ });

The $(document).ready() is a jQuery event which occurs when the HTML document has been fully loaded, while the window.onload event occurs later, when everything including images on the page loaded.

$(document).ready()

window.onload

Also window.onload is a pure javascript event in the DOM, while the $(document).ready() event is a method in jQuery.

$(document).ready()

$(document).ready() is usually the wrapper for jQuery to make sure the elements all loaded in to be used in jQuery...

$(document).ready()

Look at to jQuery source code to understand how it's working:

jQuery.ready.promise = function( obj ) { if ( !readyList ) { readyList = jQuery.Deferred(); // Catch cases where $(document).ready() is called after the browser event has already occurred. // we once tried to use readyState "interactive" here, but it caused issues like the one // discovered by ChrisS here: http://bugs.jquery.com/ticket/12282#comment:15 if ( document.readyState === "complete" ) { // Handle it asynchronously to allow scripts the opportunity to delay ready setTimeout( jQuery.ready ); // Standards-based browsers support DOMContentLoaded } else if ( document.addEventListener ) { // Use the handy event callback document.addEventListener( "DOMContentLoaded", completed, false ); // A fallback to window.onload, that will always work window.addEventListener( "load", completed, false ); // If IE event model is used } else { // Ensure firing before onload, maybe late but safe also for iframes document.attachEvent( "onreadystatechange", completed ); // A fallback to window.onload, that will always work window.attachEvent( "onload", completed ); // If IE and not a frame // continually check to see if the document is ready var top = false; try { top = window.frameElement == null && document.documentElement; } catch(e) {} if ( top && top.doScroll ) { (function doScrollCheck() { if ( !jQuery.isReady ) { try { // Use the trick by Diego Perini // http://javascript.nwbox.com/IEContentLoaded/ top.doScroll("left"); } catch(e) { return setTimeout( doScrollCheck, 50 ); } // detach all dom ready events detach(); // and execute any waiting functions jQuery.ready(); } })(); } } } return readyList.promise( obj ); }; jQuery.fn.ready = function( fn ) { // Add the callback jQuery.ready.promise().done( fn ); return this; };

Also I have created the image below as a quick references for both:

enter image description here

The document.ready event occurs when the HTML document has been loaded, and the window.onload event occurs always later, when all content (images, etc) has been loaded.

window.onload

You can use the document.ready event if you want to intervene "early" in the rendering process, without waiting for the images to load.
If you need the images (or any other "content") ready before your script "does something", you need to wait until window.onload.

document.ready

window.onload

For instance, if you are implementing a "Slide Show" pattern, and you need to perform calculations based on image sizes, you may want to wait until window.onload. Otherwise, you might experience some random problems, depending on how fast the images will get loaded. Your script would be running concurrently with the thread that loads images. If your script is long enough, or the server is fast enough, you may not notice a problem, if images happen to arrive in time. But the safest practice would be allowing for images to get loaded.

window.onload

document.ready could be a nice event for you to show some "loading..." sign to users, and upon window.onload, you can complete any scripting that needed resources loaded, and then finally remove the "Loading..." sign.

document.ready

window.onload

Examples :-

// document ready events $(document).ready(function(){ alert("document is ready.."); }) // using JQuery $(function(){ alert("document is ready.."); }) // window on load event function myFunction(){ alert("window is loaded.."); } window.onload = myFunction;

window.onload is a JavaScript inbuilt function. window.onload trigger when the HTML page loaded. window.onload can be written only once.

window.onload

document.ready is a function of the jQuery library. document.ready triggers when HTML and all JavaScript code, CSS, and images which are included in the HTML file are completely loaded.
document.ready can be written multiple times according to requirements.

document.ready

When you say $(document).ready(f), you tell script engine to do the following:

$(document).ready(f)

$

ready

In the best case, this is 2 hash table lookups, but that's ignoring the heavy work done by jQuery, where $ is the kitchen sink of all possible inputs to jQuery, so another map is likely there to dispatch the query to correct handler.

$

Alternatively, you could do this:

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

which will

onload

In the best case, this costs a single hash table lookup, which is necessary because onload must be fetched.

onload

Ideally, jQuery would compile their queries to strings that can be pasted to do what you wanted jQuery to do but without the runtime dispatching of jQuery. This way you have an option of either

eval

Thank you for your interest in this question.
Because it has attracted low-quality or spam answers that had to be removed, posting an answer now requires 10 reputation on this site (the association bonus does not count).

Would you like to answer one of these unanswered questions instead?

hjiMbumej5sTcyAs0bP1Jpy,fyKx54nMj7UGYyqP4znLV

搜尋此網誌

Gtjkyu