Should I use window.load or document.ready jquery

javascript jquery load window document
H Bellamy picture H Bellamy · Dec 19, 2011 · Viewed 10.7k times · Source

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.

Answer

Einar Ólafsson picture Einar Ólafsson · Dec 19, 2011

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

Related questions

Do something AFTER the page has loaded completely

I'm using some embed codes that insert HTML to the page dynamically and since I have to modify that dynamically inserted HTML, I want a jquery function to wait until the page has loaded, I tried delay but it doesnt …

Read More
jQuery .load() / .ajax() not executing javascript in returned HTML after appended

I've tried using .load() and $.ajax to get some HTML that needs to be appended to a container, but the Javascript within the returned HTML is not being executed when I append it to an element. Using .load(): $('#new_…

Read More
JavaScript/jQuery event listener on image load for all browsers

I am looking for a way to implement this for as many browsers as possible: var image = new Image(); image.addEventListener("load", function() { alert("loaded"); }, false); image.src = "image_url.jpg"; This didn't work in IE so I googled and …

Read More