9

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

我在 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（在标题中定义）还是内联的？通过更改准备加载，我会失去什么？例如，当用户单击元素时，我是否会冒着事件未附加到元素的风险？

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

4

2 回答 2

11

尝试使用

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

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

避免使用

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

它将在加载 DOM 后运行 js。

于 2013-08-27T07:24:09.813 回答
3

执行顺序如下：

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

作为一般规则，将所有脚本放在 ready 和 load 处理程序之外，以便在调用它们时加载函数。然后将所有事件侦听器保留在就绪处理程序中并按需调用任何函数。

高级 JS 结构如下所示：

  1. jQuery 库
  2. 插件/第三方脚本
  3. 自定义脚本
  4. $(document).ready()封装最小的 JS 逻辑，监听 DOM 事件
于 2015-12-14T22:37:16.527 回答