25

抱歉，如果之前已回答过此问题，但所有搜索都在谈论差异，而不是尽可能将两者结合使用。

简单来说，可以$(window).load.(function() {})用 INSIDE of$(document).ready.(function() {})吗？

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

这是可接受的做法吗？

我只想DIV在完全构建后使用最可接受的方法来显示包含小图像的工具，例如工具栏。（例如，visibility hidden与 相比display none）。用于此的 HTMLDIV由 内部的代码编写$(document).ready，然后$('body').append()在使用$(window).load.

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

4

4 回答 4

23

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

于 2011-02-15T17:15:08.680 回答
11

编辑：

注意：此答案仅适用于 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
    })

});

在 a 中放置.load一个ready简单的保证 DOM 在load触发时准备就绪。

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

这最终可能更多是个人喜好问题，但是 OP 明确询问这种安排是否会引起问题。这还没有被证明是真的。

于 2013-03-13T13:24:28.390 回答
11

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

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

需要明确的是，我们了解造成这种情况的原因。我们最近使准备好的处理程序异步触发。这具有难以放弃的优势。缺点是如果加载事件触发得足够快，就绪处理程序有时会在加载事件之后触发。您在此问题中看到的副作用是您在 load 事件已经触发后绑定了​​ load 事件处理程序。

解决方法是将负载绑定到就绪之外。

$(function() {
   // Things that need to happen when the document is ready
});

$(window).on("load", function() {
   // Things that need to happen after full load
});
于 2018-02-10T06:38:26.523 回答
5

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

正如@ViRuSTriNiTy 在评论中提到的那样，这段代码在 jQuery 3 中不再有效，并且在GitHub 上作为问题被提及。

所以不再推荐这种方法。

一种方法是使用以下代码

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

但是，如果您已准备好加载图像并希望在完全加载后调用某些代码，则此代码将不起作用。

于 2017-11-13T15:02:11.840 回答