0

When manipulating things as height of a div for instance, or various css rules, it's a good thing that the document is completely loaded. So why not always use (window).load instead of (document).ready when manipulating objects in the dom?

Robin Cox
  • 1,470
  • 2
  • 16
  • 31
  • `When manipulating things as height of a div for instance, or various css rules, it's a good thing that the document is completely loaded.` Not really, indeed really often you have better to use document ready. But for sure, that depends what you are looking for – A. Wolff May 07 '14 at 16:16

3 Answers3

3

It certainly depends on your needs.

Suppose your site has a lot of images but you need certain events that need to be triggered as soon as the document is ready,Then using a $(window).load(//your events) would wait for all the images to load first and then trigger the events. In this case it would be preferable to use $(document).ready(//your events).

You can follow up this question here,

What is the difference between $(window).load and $(document).ready?

Community
  • 1
  • 1
Hardeep Mehta
  • 469
  • 1
  • 6
  • 17
1

Because "document ready" is much earlier. It says that the DOM has been loaded and is ready for manipulation.

"window load", on the other hand, also includes images, videos and possibly flash elements - all elements which could potentially take a long time to load (especially Flash unless it has a proper preloader), and that you would have to wait for before your page does anything, even though there's no reason to.

Niet the Dark Absol
  • 320,036
  • 81
  • 464
  • 592
  • Good point, but for altering heights of lets say divs with images in them depending on their height window.load is good. – Robin Cox May 07 '14 at 16:23
  • Not really. Images expose their `width` and `height` properties as soon as they *start* downloading, which (in particular in the case of photos) may be several seconds before `window.onload` ever gets fired. – Niet the Dark Absol May 07 '14 at 16:23
  • I have a blog I'm working on right now and the sidebars need to stretch to collectively have the same height as the main blog article. I use jQuery to do this and if I'm doing it inside (document).ready I get the right result sometimes and a totally bogus result other times. If I do it inside (window).load I always get the right results. – Robin Cox May 08 '14 at 08:59
  • I see. Yes, that makes sense. However, have you considered using different CSS to make the sidebars the same height? It might be doable just with `height:100%`, but it may require use of `flex` boxes. Worst-case scenario, you could always use tables. – Niet the Dark Absol May 08 '14 at 09:11
  • It's ok, I works perfectly fine with (window).load, thanks for your help man :) – Robin Cox May 08 '14 at 09:39
0

Because what you can do today you don't wait for tomorrow. Document ready fire after Dom ready where as window load wait for all the resources to download.

Md Nazmoon Noor
  • 3,187
  • 1
  • 24
  • 30