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之前，页面将完全呈现，包括所有图像。

这很好用。但是，我想知道为什么以及它是否会永远。是不是在onLoad之前执行了$（document）.ready（）？在执行$（document）.ready时，我不会冒没有定义必要函数的风险吗？

那么，我是否需要将每个$（文档）.ready更改为$（document）.load（）？或者，至少其中一些？但是然后首先执行哪个onLoad（）？加载外部js（在标题中定义）或内联js的那个？通过改变准备加载我会失去什么？例如，当用户点击元素时，我可能会冒一个事件未附加到元素的风险吗？

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

Answer 1

尝试使用

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

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

避免使用

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

它将在加载DOM之后运行js。

Answer 2

执行顺序如下：

ready()将触发。
load()会触发：HTML，Scripts， CSS，图像

作为一般规则，将所有脚本放在ready和load处理程序之外，因此函数在被调用时加载。然后将所有事件侦听器保留在ready处理程序中，并根据需要调用任何函数。

高级JS结构如下所示：

jQuery Library
插件/第三方脚本
自定义脚本
$(document).ready()包装最小的JS逻辑侦听DOM事件

推迟加载js时$（document）.load（）和$（document）.ready（）的顺序

2 个答案: