Coder Perfect

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


What’s the difference between window.onload in JavaScript and $(document).ready() in jQuery?

Asked by Vaibhav Jain

Solution #1

The ready event fires after the HTML document has loaded, while the onload event fires when all content (such as images) has loaded.

The ready event is unique to jQuery, whereas the onload event is a normal DOM event. The ready event’s aim is to happen as soon as possible after the document has loaded, so that code that adds functionality to the page’s elements does not have to wait for all of the material to load.

Answered by Guffa

Solution #2

Window.onload is a built-in JavaScript event, but because it has subtle quirks in different browsers’ implementations (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 (without waiting for images, for example).

$(document).ready (not to be confused with undefined document.ready) is a jQuery function that wraps and provides consistency to the following events:

Answered by Piskvor left the building

Solution #3

A jQuery event is $(document).ready(). When the DOM is ready, JQuery’s $(document).ready() method is called (which means that the browser has parsed the HTML and built the DOM tree). This enables you to execute code as soon as the document is ready for manipulation.

For instance, if a browser supports the DOMContentLoaded event (which many non-IE browsers do), that event will be fired. (Note that the DOMContentLoaded event was only introduced in Internet Explorer 9 and later.)

There are two syntaxes that can be used for this:

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

Alternatively, the abbreviated version is:

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

The following are the main points for $(document).ready():

The function window.onload() is a JavaScript native function. When all of the content on your page has loaded, including the DOM (document object model), banner advertisements, and images, the window.onload() event occurs. Another distinction is that, whereas we can have several $(document).ready() functions, there can only be one onload function.

Answered by James Drinkard

Solution #4

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. body onload= is another option. Both are the same; window.onload = function(){} and are different ways of using the same event.

When the DOM (Document object model) is loaded on your page, the jQuery $document.ready function event fires a little earlier than window.onload. It will not wait for all of the photos and frames to load completely.

The following article explains how $document.ready() differs from window.onload ()

Answered by Vivek

Solution #5

Use the window whenever possible. To add an event to the window, use addEventListener. Because you can run the code in several event handlers this way.

Correct code:

Invalid code:

This is due to the fact that onload is merely a property of the object that is rewritten.

Similarly to addEventListener, it is preferable to use $. (document). instead of onload, use ready().

Answered by Илья Зеленько

Post is based on