I am integrating a javascript library called chart.js in a php page that I am making and I have seen that in their examples they use the function
window.onload
instead of $(document).ready()
and the doubt that gives name to this question has arisen:
What is the difference between window.onload and $(document).ready()?
I've found a similar question on English SO called window.onload vs $(document).ready() but it's not entirely clear to me as my English is not very good.
I would appreciate if someone can solve this question for me. Cheers
The difference is clearly explained by jQuery in its English documentation. Unfortunately there is little documentation of this library in Spanish:
It is clear, the difference is indicated in the very name of each method:
document : when only the document is ready, we could say, the HTML part.
window : when the entire window, document, and everything else is ready.
▸
window.onload()
The event
onload
, which is short for isload
fired at the end of the document loading process. That is, when all the DOM objects (images, flash, scripts, frames) have finished loading. One exception is style sheets, which are not always loaded at the time this event fires.▸
$(document).ready()
jQuery
document.ready
is executed when all HTML content is ready, but before images and other resources. In modern browsers, it is replaced byDOMContentLoaded
.Important note:
As of jQuery 3.0,
$(document).ready()
it goes into the Deprecated state , although it will still work, it will disappear from the jQuery core in the next version of the library (version 4).The jQuery 3 Update Guide (in English, hoping to have this documentation in Spanish one day), explains the following about it:
Note: There is a plugin to migrate our code from previous libraries to jQuery 3, for more information, I leave the link here .
In summary
If we are going to work with the elements that make up the web (divs, inputs, …) we will use
$(document).ready()
. But if, on the contrary, we are going to work with images to align them or check their dimensions, we will have to use$(window).load()
.It is a very widespread error to use
$(window).load()
when we are going to work only with DOM elements, or to use$(document).ready()
when we are going to work with elements that will not be loaded when said function is executed.An image illustrating the different elements of a window
test code
Let's see what happens in this code snippet in which the DOM elements are loaded on the one hand and a YouTube iframe on the other. Even if it's minimal, you will see the difference in loading time on the console.
I will use the jQuery 3 library and
$(function() {...
instead of$( document ).ready(function() {
And by the way, if you like flamenco, don't forget to listen to one of the most beautiful songs of this genre :)
There are two basic differences:
$(document).ready()
it is part of a javascript library (jQuery), it is not "native javascript", as is the case with the eventwindow.onload
The event
onload
is fired when the page has been fully loaded, with all that this entails (styles, images, etc...) while the function$(document).ready()
is available before that happens, when the document's DOM tree is complete.Anyway the link you have added to your question explains it well.
Window#load
This event is fired once the DOM has loaded and the entire document has finished parsing. This includes style sheets, scripts and all types of multimedia files (images, videos, embedded documents, etc.).
jQuery#ready
This is a custom jQuery event that is fired when the entire DOM tree has been loaded and all elements are available in the DOM (regardless of whether the resources they reference are available). This event is very similar to
document#DOMContentLoaded
.document#DOMContentLoaded
It does basically the same thing as
jQuery#ready
. This event is fired natively when the DOM is ready (regardless of the resources being referenced).jQuery#ready
vsdocument#DOMContentLoaded
Apparently
jquery#ready
it was and is a polyfill fordocument#DOMContentLoaded
. Keep in mind that jQuery came to light when JavaScript was still very lazy, without the features it has today to make things easier.According to the jQuery documentation, it says the following:
According to jQuery,
DOMContentLoaded
it is fired before the browserjQuery#ready
parses the handler so itready
will be executed anyway. On the other hand, if the handler is addedDOMContentLoaded
after the eventready
is fired, it is never executed.Adding to the answers that already exist, it should also be noted that the events
Window#load
anddocument#DOMContentLoaded
are executed only once. If you declare a function conditional on that event, and the declaration occurs after they have fired, the function will never execute.On the other hand,
jQuery#ready
it will be executed when the document is ready, and it will be executed "immediately" when the document has been ready beforehand.Finally, unlike the window and document events,
jQuery#ready
it works, inside, as a promise (so it's never really "immediately"). This means that the code inside a block$(document).ready()
is always executed asynchronously regardless of whether it was declared when the DOM was already loaded.This can be verified in the following snippet. A block
$(document).ready()
within a block$(document).ready()
, even knowing that the DOM is ready, is not executed sequentially with commands one level higher:In practice, you can have many blocks
$(document).ready
without them affecting each other, for example when one of them throws an error. You clearly can't do this with the window and document events.The previous answers are very good, just need an example to clarify the difference. Here one in fiddle
Once the image is loaded into the browser's cache, the loading difference is imperceptible. The difference between both loads can be calculated to know the load time of external files.