窗口加载里面的文件准备好了吗？

Question

抱歉，如果之前已经回答过这个问题，但所有搜索都讨论了差异，而不是如果可能的话，将两者一起使用。

简单地说，可以在 $(document).ready.(function() {}) 内部使用 $(window).load.(function() {}) 吗？

我有一些事情应该在 DOM 加载后完成，但我想仅在图像加载完成后才显示某些元素。在 Explorer 8 中唯一有效的是将 $(window).load 函数与其他所有内容一起放入 $(document).ready 中。

这是可以接受的做法吗？

我只想在完全构建后使用最可接受的方法来显示包含小图像（例如工具栏）的 DIV 。 （例如，可见性 隐藏与显示 无）。此 DIV 的 HTML 由 $(document).ready 内的代码编写，然后使用 $('body').append 附加到正文() 在使用 $(window).load 之前。

我在使用 Explorer 8 时遇到很多问题。

Answer 1

这工作得很好并且是一种可以接受的做法。毕竟，正如您所描述的，在某些情况下，$(window).load() 处理程序中的逻辑可能取决于 DOM 准备好后发生的工作。如果在您设置 $(window).load() 时窗口实际上已经加载，则处理程序将立即触发。

Answer 2

我最近遇到了这个问题...从 jQuery 版本 3 开始，我们不能再将 $(window).on('load') 放在 document.ready() 中...因为就绪处理程序是异步调用，也就是说ready可以在加载后调用。

来自 jQuery 核心团队：Github：jQuery 3 问题

需要明确的是，我们了解造成这种情况的原因。我们最近做好了准备
处理程序异步触发。这具有难以达到的优点
放弃。缺点是就绪处理程序有时会触发
如果加载事件触发得足够快，则在加载事件之后。侧面
您在本期中看到的效果是您绑定了一个加载事件
加载事件已经触发后的处理程序。

修复方法是将负载绑定到ready之外。

<前><代码>$(函数() {
// 文档准备好后需要发生的事情
});

$(窗口).on("加载", function() {
// 满载后需要发生的事情
});

Answer 3

编辑：

注意：此答案仅适用于 jQuery v2 及更低版本。

---

jQuery .ready() 事件：

传递给.ready()的处理程序保证被执行
DOM 准备就绪后，因此这通常是附加所有其他事件处理程序并运行其他 jQuery 代码的最佳位置。

jQuery .load() 事件方法：

当元素和所有子元素都具有时，load 事件将发送到元素
已完全加载。该事件可以发送到任何元素
与 URL 关联：图像、脚本、框架、iframe 和
窗口对象。

根据上面的 jQuery 文档，我没有看到任何表明以下问题的内容：

$(document).ready(function () {
    // will fire IMMEDIATELY after the DOM is constructed

    $(window).load(function() {
        // will only fire AFTER all pages assets have loaded
    })

});

将 .load 放在 ready 中只是保证 DOM 已准备就绪每当 load 被触发时。

人们可能希望将所有 jQuery 代码放在单个 DOM 就绪处理程序中，但仍然可能有一个需要首先加载所有图像的 jQuery 代码子集。这种安排保证了所有代码在 DOM 准备好后立即触发，其余代码将在页面资源加载完成时随后触发。

这可能最终更多地是个人喜好的问题，但是OP明确询问这种安排是否会引起问题。这尚未被证明是正确的。

Answer 4

警告：
这个问题的答案已经非常过时了。

正如 @ViRuSTriNiTy 在评论中提到的，此代码在 jQuery 3 中不再有效，并且它被作为 GitHub。

所以不再建议使用这种方法。

一种方法是使用以下代码。

$(window).on("load", function(){
   $.ready.then(function(){
      // Both ready and loaded
   });
})

但是，如果您加载就绪图像并希望在完全加载后调用一些代码，则此代码将不起作用。