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?

1
  • 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 7, 2014 at 16:16

3 Answers 3

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?

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.

5
  • 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 7, 2014 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. May 7, 2014 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 8, 2014 at 8: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. May 8, 2014 at 9:11
  • It's ok, I works perfectly fine with (window).load, thanks for your help man :)
    – Robin Cox
    May 8, 2014 at 9: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.

Not the answer you're looking for? Browse other questions tagged or ask your own question.