Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Should I use window.load or document.ready jquery

Recently I saw that you could use either

$('document').ready(function() {
//Do Code
});

or

$('window').load(function() {
//Do Code
});

for jQuery.

However, they seem the same to me! But clearly aren't.

So my question is: Which one should I use for a website sort of based on animation and async? And also which one of the two is generally better to use?

Thanks.

like image 357
H Bellamy Avatar asked Dec 19 '11 14:12

H Bellamy


People also ask

Is it necessary to use document ready in jQuery?

A page can't be manipulated safely until the document is "ready." jQuery detects this state of readiness for you. Code included inside $( document ).ready() will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute.

Which event fires first document ready or document load?

The document. ready() function will be executed as soon as the DOM is loaded.

What is the difference between document ready and onload?

The onload executes a block of code after the page is completely loaded while $(document). ready(function) executes a block of code once the DOM is ready.

What comes after document ready jQuery?

So, there is no event called after document. ready(). You'll need to create and wait for events to complete on your own, or use window. load().


2 Answers

$('document').ready runs the code when the DOM is ready, but not when the page itself has loaded, that is, the site has not been painted and content like images have not been loaded.

$(window).load runs the code when the page has been painted and all content has been loaded. This can be helpful when you need to get the size of an image. If the image has no style or width/height, you can't get its size unless you use $(window).load.

like image 139
Einar Ólafsson Avatar answered Oct 14 '22 18:10

Einar Ólafsson


Well first of all you may want to consider using the "ready" event, which you can handler like this:

$().ready(function() {
  ...
});

Or, more succinctly and idiomatically:

$(function() {
  ...
});

The "load" handler really relates to an actual event, and can be handled on several different sorts of elements: <img> and <iframe> for example. The "load" event at the document or window level happens when all of the page's resources are loaded. The (synthesized, in some browsers) "ready" event however happens when the page DOM is ready but possibly before things like <img> contents.

Another option is to simply put your <script> tags at the very end of the <body> or even after the <body>. That way the scripts have the entire DOM to work with, but you don't have to worry about any sort of event handling to know that.

like image 28
Pointy Avatar answered Oct 14 '22 20:10

Pointy