Asked 13/9, 2010 at 6:24 Answered 1/7, 2021 at 7:54

Solved javascript jquery dom-events unobtrusive-javascript

1391

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

Hollandia answered 13/9, 2010 at 6:24 Comment(4)

possible duplicate of $(document).ready equivalent without jQuery – Ochlophobia 15/3, 2015 at 14:34

Most of the answers here are outdated. The way jQuery currently implements $().ready() makes it fire after window.onload at times. – Ky 12/6, 2019 at 16:16

Remark: $(window).on('load', function(){}); is jQuery's equivalent for window.onload – Lusty 27/8, 2020 at 15:8

for document ready function we can set like below.. document.addEventListener("DOMContentLoaded", function (event) {}); And for window.onload like below... window.addEventListener('load', function () {}); – Fairweather 8/3, 2022 at 7:47

1365

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.

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.

Chorography answered 13/9, 2010 at 6:28 Comment(11)

There's also document.onload (see #588540) – Patina 9/2, 2014 at 21:36

@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 – Erland 7/3, 2014 at 12:35

FYI, The link @baptx gave, itself links to a js function based on DOMContentLoaded (when it exists) or readystatechanged (for IE): github.com/dperini/ContentLoaded/blob/master/src/… so presumably that is roughly what it takes to implement jQuery's ready. – Stilton 12/8, 2014 at 0:19

tech-blog.maddyzone.com/javascript/… hope this will helpful – Republicanism 1/9, 2014 at 18:35

There is no such event as onload. onload is the name of an object property that stores a function to be invoked when the load event is triggered. – Dorcus 13/3, 2016 at 15:22

For images this solved my problem exactly, I was getting incorrect height and width values from the document.ready when doing a hard refresh which makes perfect sense with the explanation in the original post. Thanks! – Plaintive 6/11, 2016 at 15:13

if i don't have external css or js or any images to load in a html file still my winodw.onload triggers later then document.ready event why is that so, but from the behavior i can see even though it register both the events at the same time but it will trigger the document.ready event first. I understood the reason that why document.ready loads fist but even though window is the parent of document object model still it will trigger later, why – Orchid 22/10, 2018 at 9:39

@GanpatKakar: One event simply has to be triggered before the other, even if the time difference is nearly zero. It's more reliable to trigger the events in the same order even if there are no other resources to load than the document itself. – Chorography 22/10, 2018 at 16:3

This answer is not correct in the actual Chrome/Edge Browsers (2022-10). If you create a single page containing an image and console.log for both events you will get doc -> window order (as stated). If there is nothing on the page (just hard-coded text) the order will be window->doc – Autoxidation 28/10, 2022 at 16:21

I ask, are considered js file as content or not? – Ignazio 21/12, 2022 at 17:55

161

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.).

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

DOMContentLoaded - a newish event which fires when the document's DOM is loaded (which may be some time before the images, etc. are loaded); again, slightly different in Internet Explorer and in rest of the world
and window.onload (which is implemented even in old browsers), which fires when the entire page loads (images, styles, etc.)

Abnaki answered 13/9, 2010 at 6:30 Comment(7)

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. – Kazimir 13/9, 2010 at 8:31

@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. – Abnaki 13/9, 2010 at 8:44

What kind of object sniffing do you mean? – Kazimir 13/9, 2010 at 8:55

@Tim Down: IIRC, Opera's window.onload didn't work correctly (as of 9.04), so you had to sniff for window.opera and hook document.onload; also, there was (is?) a different way of registering for events in IE and in normal browsers (window.onload=function(){} works everywhere, yes, but clobbers whatever was there previously). I may not recall this clearly, as jQuery's document.ready has freed me from this kind of drudgery, many years ago :) – Abnaki 13/9, 2010 at 9:16

OK. Opera has had window.onload for ages (since version 7 maybe? Certainly prior to version 9). Not sure what your point about IE is: are you referring to what happens when both window.onload is assigned and <body> has an onload attribute? That does indeed vary between browsers, but that situation should simply be avoided. Agreed that a library does simplify this kind of thing, but in general, window.onload = function() { ... }; works well in all major browsers so long as there's no onload attribute in the <body> element. – Kazimir 13/9, 2010 at 10:30

@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. – Abnaki 13/9, 2010 at 11:6

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. – Karlie 6/3, 2014 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.

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():

It will not wait for the images to be loaded.
Used to execute JavaScript when the DOM is completely loaded. Put event handlers here.
Can be used multiple times.
Replace $ with jQuery when you receive "$ is not defined."
Not used if you want to manipulate images. Use $(window).load() instead.

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.

Cohligan answered 20/8, 2013 at 16:0 Comment(5)

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. – Stilton 12/8, 2014 at 0:36

You are correct, so I edited the answer to reflect your comment and thanks! – Cohligan 13/5, 2015 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. – Darton 12/8, 2015 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 – Cohligan 12/8, 2015 at 14:34

Why will someone want to use $(document).ready() multiple times? – Krasnoyarsk 12/1, 2016 at 19:34

A little tip:

Always use the window.addEventListener to add an event to window. Because that way you can execute the code in different event handlers .

Correct code:

window.addEventListener('load', function () {
  alert('Hello!')
})

window.addEventListener('load', function () {
  alert('Bye!')
})

Invalid code:

window.onload = function () {
  alert('Hello!') // it will not work!!!
}

window.onload = function () {
  alert('Bye!') 
}

This is because onload is just property of the object, which is overwritten.

By analogy with addEventListener, it is better to use $(document).ready() rather than onload.

Sall answered 2/9, 2018 at 15:26 Comment(1)

This doesn't answer the question asked. – Templetempler 13/12, 2018 at 3:49

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.

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.

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

Microminiaturization answered 17/9, 2013 at 7:9 Comment(2)

I think this is the best answer! – Combings 8/11, 2015 at 20:56

I might agree, if it weren't copied word-for-word. – Schwarzwald 30/6, 2016 at 18:28

$(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>

Blankenship answered 26/2, 2014 at 12:30 Comment(0)

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.

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

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

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:

Cypriot answered 13/10, 2017 at 14:52 Comment(0)

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.

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.

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

Pierette answered 27/8, 2012 at 18:56 Comment(2)

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? – Ruskin 3/1, 2013 at 20:4

IE6, 7, and 8. See: #13186189 – Cohligan 12/2, 2013 at 15:1

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('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.

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.

Before jQuery 1.8, $(document).load(handler) existed as an alias to $(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 */
});

Mather answered 7/11, 2013 at 20:54 Comment(0)

Document.ready (a jQuery event) will fire when all the elements are in place, and they can be referenced in the JavaScript code, but the content is not necessarily loaded. Document.ready executes when the HTML document is loaded.

$(document).ready(function() {

    // Code to be executed
    alert("Document is ready");
});

The window.load however will wait for the page to be fully loaded. This includes inner frames, images, etc.

$(window).load(function() {

    //Fires when the page is loaded completely
    alert("window is loaded");
});

Palmate answered 3/3, 2015 at 6:52 Comment(0)

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.

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.

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.

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.

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;

Fidellas answered 16/5, 2016 at 10:37 Comment(0)

Time flies, it's ECMAScript 2021 now and IE11 is used by people less and less. The most two events in contrast are load and DOMContentLoaded.

DOMContentLoaded fires after the initial HTML document has been completely loaded and parsed.

load fires after DOMContentLoaded and the whole page has loaded, waiting for all dependent resources to finish loading. Example of resources: scripts, stylesheets, images and iframes etc.

IMPORTANT: Synchronous scripts will pause parsing of the DOM.

Both two events can be used to determine the DOM is able to use or not. For examples:

<script>
    // DOM hasn't been completely parsed
    document.body; // null

    window.addEventListener('DOMContentLoaded', () => {
        // Now safely manipulate DOM
        document.querySelector('#id');
        document.body.appendChild();
    });

    /**
     * Should be used only to detect a fully-loaded page.
     * 
     * If you just want to manipulate DOM safely, `DOMContentLoaded` is better.
     */
    window.addEventListener('load', () => {
        // Safely manipulate DOM too
        document.links;
    });
</script>

Calfee answered 1/7, 2021 at 7:54 Comment(0)

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

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.

Cyclades answered 24/6, 2014 at 9:46 Comment(1)

"window.onload is a function" is incorrect as @Илья-Зеленько demonstrates it is a property and not a function. Details: developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/… whereas .ready() is a function and expects a handler. – Multimillionaire 29/11, 2018 at 19:16

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

get the object document and push it, since it's not in local scope, it must do a hash table lookup to find where document is, fortunately document is globally bound so it is a single lookup.
find the object $ and select it, since it's not in local scope, it must do a hash table lookup, which may or may not have collisions.
find the object f in global scope, which is another hash table lookup, or push function object and initialize it.
call ready of selected object, which involves another hash table lookup into the selected object to find the method and invoke it.
done.

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

find the object window in global scope, if the JavaScript is optimized, it will know that since window isn't changed, it has already the selected object, so nothing needs to be done.
function object is pushed on the operand stack.
check if onload is a property or not by doing a hash table lookup, since it is, it is called like a function.

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

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

do dynamic dispatch of jquery like we do today.
have jQuery compile your query to pure JavaScript string that can be passed to eval to do what you want.
copy the result of 2 directly into your code, and skip the cost of eval.

Goad answered 30/11, 2017 at 17:28 Comment(0)

window.onload is provided by DOM api and it says " the load event fires when a given resource has loaded".

"The load event fires at the end of the document loading process. At this point, all of the objects in the document are in the DOM, and all the images, scripts, links and sub-frames have finished loading." DOM onload

But in jQuery $(document).ready() will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute. This does not include images, scripts, iframes etc. jquery ready event

So the jquery ready method will run earlier than the dom onload event.

Unfavorable answered 14/2, 2020 at 6:58 Comment(0)

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

A little tip:

Events

Functions

Further Reading

Recommended topics

Hot tags