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

Question

在更改所有代码之前，我只想验证是否需要这样做。

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

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

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

现在我刚刚更改了外部 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;

这样，在开始加载 JS 之前，页面就已完全渲染，包括所有图像。

这很好用。然而，我想知道为什么以及是否总是如此。 $(document).ready()不是在onLoad之前执行的吗？执行 $(document).ready 时是否会面临未定义必要函数的风险？

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

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

Answer 1

尝试使用

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

整个页面加载完毕后会运行js。

避免使用

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

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