jQuery 延迟加载 js 时 $(document).load() 和 $(document).ready() 的顺序

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

提问by user984003

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:

我在 ready() 函数中有几个内联 js 和 jquery 函数：

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

其中许多函数依赖于包含在外部 js 文档中的其他函数。它们还使用在外部样式表中定义的类。

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):

现在我刚刚更改了我的外部 js 和 css 的加载，使其被推迟（按照 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.

通过这种方式，页面在开始加载 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?

这工作正常。但是，我想知道为什么以及是否总是会这样。$(document).ready() 不是在 onLoad 之前执行的吗？在执行 $(document).ready 时，我不会冒险没有定义必要的函数吗？

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?

那么，我是否需要将每个 $(document).ready 更改为 $(document).load()？或者，至少是其中一些？但是首先执行哪个 onLoad() 呢？加载外部js（在标题中定义）还是内联js？更改准备加载会丢失什么？例如，当用户单击某个元素时，我是否可能冒着事件未附加到该元素的风险？

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

顺便说一句，jquery api 没有延迟，因为当我去执行其他代码时会导致问题。

回答by Chunky

Try using

尝试使用

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

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

它会在整个页面加载后运行 js。

Avoid using

避免使用

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

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

它将在加载 DOM 后立即运行 js。

回答by Oriol

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

1. ready()当 DOM (HTML) 准备好并加载脚本时触发。
2. load()当其他所有内容也完成加载时触发：HTML、脚本、CSS、图像

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:

高级 JS 结构如下所示：

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

1. jQuery 库
2. 插件/第三方脚本
3. 自定义脚本
4. $(document).ready()包装最小的 JS 逻辑监听 DOM 事件