onLoad 总是在 DOM 准备好后被触发吗？

Question

我想在 DOM 准备好时禁用我的插件对 DOM 执行的某些特定“功能”。

如果我将代码放入 onload 回调中，它是否总是在 ready 回调之后执行？

我想百分百确定，即使没有任何图像，也只会在加载之前执行准备好的图像。

Answer 1

虽然我认为 @jAndy 的答案 是正确的，但您也可以通过将代码放在 中来为自己提供一些额外的保证onload 在 ready() 调用中。

只需确保您的主要 ready() 调用首先出现。

$(document).ready(function() {
    // Your normal ready handler
});

$(window).load(function() {
    // Placing code in another .ready() call in here will add it to the
    //    end of internal Array of ready handlers if any are pending
    $(document).ready(function() {
        // my onload code
    });
});

因此，如果在 onload 触发时 ready() 已经触发，您的 onload 代码仍将运行。 （一旦 DOM 准备好，就会设置一个内部标志，因此将来的 .ready() 调用将立即被调用。）

如果 .ready() > 在发生 onload 时未以某种方式触发，这意味着您的原始 ready() 代码位于内部数组中的第一个，并且将添加新的 .ready() 代码到数组的末尾。

---

编辑：

查看在 DOM 准备就绪时触发的主 jQuery.ready 处理程序的源代码（反过来，触发用户的列表） .ready() handlers)，看起来好像有一个 IE bug，处理程序触发得有点早。

为了修复此错误，jQuery 使处理程序异步调用，直到它实际看到 document.body。

ready: function (wait) {
    // Either a released hold or an DOMready/load event and not yet ready
    if ((wait === true && !--jQuery.readyWait) || (wait !== true && !jQuery.isReady)) {

        // Make sure body exists, at least, in case IE gets a little overzealous (ticket #5443).
        if (!document.body) {
            return setTimeout(jQuery.ready, 1);
        }

        // Remember that the DOM is ready
        jQuery.isReady = true;

        // If a normal DOM Ready event fired, decrement, and wait if need be
        if (wait !== true && --jQuery.readyWait > 0) {
            return;
        }

        // If there are functions bound, to execute
        readyList.fireWith(document, [jQuery]);

        // Trigger any bound ready events
        if (jQuery.fn.trigger) {
            jQuery(document).trigger("ready").off("ready");
        }
    }
},

看来，由于处理程序的异步循环，IE 至少可能倾向于在 .ready() 处理程序之前调用 window.onload 处理程序。

按照我上面的描述，添加到 onload 中的 .ready() 处理程序列表应该可以解决这个问题。

Answer 2

是的。

• onload 将在加载任何其他内容（图像、框架、iframe 等）时触发，
• DOMContentLoaded 将在 DOM 树可以访问时立即触发。

Answer 3

不。亲自尝试一下：创建一个大型 HTML 文件，删除所有依赖资源（图像、脚本、样式表）并进行测试。

当从互联网获取每个资源时，加载会触发。 DOMContentLoad 在获取 HTML 并对其进行解析时触发。在我的测试中，后者使用 140 KB HTML 代码花费了 14 毫秒。当然，这是一种边缘情况，但不能保证 load 在 DOMContentLoaded 之前触发 - 即使使用外部资源也不行（由于缓存、使用 HTTP/2 并行下载、快速连接）。