Order of $(document).load() and $(document).ready() when deferring loading js

Question

Before I change all my code, I just want to verify that I need to.

I have several inline js and jquery functions that are in the ready() function:

$(document).ready(function(){ do_something(); ...

Many of these functions rely on other functions that are contained in an external js document. They also use classes that are defined in the external style sheet.

Now I have just changed the loading of my external js and css such that it is deferred (as recommended by Google https://developers.google.com/speed/docs/best-practices/payload?hl=en#DeferLoadingJS):

 if (window.addEventListener)
    window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
    window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;

This way the page is fully rendered, including all images, before it starts to load the JS.

This works fine. However, I'm wondering why and whether it always will. Isn't $(document).ready() executed before onLoad? Won't I risk not having the necessary functions defined when $(document).ready is executed?

So, do I need to change every $(document).ready to $(document).load()? Or, at least some of them? But then which onLoad() is executed first? The one that loads the external js (which is defined in the header) or the inline ones? what do I lose by changing ready to load? Might I, for example, risk that an event is not attached to an element when a user clicks on the element?

Btw, the jquery api is not deferred because that caused problems when I went to execute other code.

Answer 1

Try using

 $(window).load(function(){
 dosomething();
 });

It will run the js after the whole page is loaded.

Avoid using

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

It will run the js just after the loading of DOM.

Answer 2

The order of execution is as follows:

1. ready() fires when the DOM (HTML) is ready and scripts are loaded.
2. load() fires when everything else has finished loading too: HTML, Scripts, CSS, Images

As a general rule, place all scripts outside the ready and load handlers, so functions are loaded by the time they get called. Then keep all event listeners inside the ready handler and call any functions on demand.

The high-level JS structure looks like this:

1. jQuery Library
2. Plugins/Third-party scripts
3. Custom scripts
4. $(document).ready() wrapping minimal JS logic listening for DOM events