CODEWITHSUNDEEP
javascriptjqueryloadwindowdocument
H Bellamy
H Bellamy

Reputation: 22715

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.

Upvotes: 14

Views: 10830

Answers (2)

Einar Ólafsson
Einar Ólafsson

Reputation: 3177

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

Upvotes: 31

Pointy
Pointy

Reputation: 413826

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.

Upvotes: 7

Related Questions