文档准备好后加载窗口？

Question

抱歉如果此前已经有人回答过这个问题，但是所有的搜索结果都是关于两者之间差异的，而不是它们是否可以一起使用。

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

我有一些应该在DOM加载后完成的任务，但是我希望只有在图片加载完成后才显示某些元素。唯一在IE8中有效的方法是将$(window).load函数与其他所有内容放在$(document).ready内部。

这种做法可行吗？

我只想使用最可接受的方法来显示包含小图像（例如工具栏）的DIV，并且要等到它完全构建后再显示。（例如使用visibility hidden与display none）。这个DIV的HTML是由$(document).ready内部的代码编写的，然后使用$('body').append()添加到中，然后再使用$(window).load。

我在IE8中遇到了很多问题。

- Sparky

Answer 1

这很好用，也是可接受的做法。 毕竟，正如您所描述的那样，可能存在一些情况，$(window).load() 处理程序中的逻辑依赖于DOM准备就绪之后执行的工作。如果实际上窗口在您设置 $(window).load() 时已经加载完毕，则处理程序将立即触发。

- Ken Redler

---

感谢您的回答，它给了我所需的信心，让我可以将我的脚本重写为更加健壮的形式。 - Sparky

Answer 2

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

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

需要明确的是，我们知道这是什么原因。我们最近使ready处理程序异步触发。这有一些难以放弃的优点。缺点是如果load事件足够快地触发，那么ready处理程序有时可能会在load事件之后触发。您在此问题中看到的副作用是在load事件已经触发后绑定了load事件处理程序。

解决方法是在ready外部绑定load事件。

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

$(window).on("load", function() {
   // Things that need to happen after full load
});

很好的，请将需要翻译的内容提供给我。

- Hooman Bahreini

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 里只是确保当 load 被触发时 DOM 已经准备好了。

有人希望把所有的 jQuery 代码放在一个 DOM 准备好的处理器中，但仍可能有一小部分 jQuery 代码需要先加载所有图片。这种安排保证所有代码都会在 DOM 准备好后触发，其余代码将在页面资源加载完成后随后触发。

这最终可能更多是个人喜好的问题，然而 OP 明确询问此安排是否会引起问题。事实并非如此。

- James Westgate

---

这是一个很棒的答案。 - Quinn Keaveney

遗憾的是，这在jQuery 3中不再起作用。加载处理程序不会被调用。 - ViRuSTriNiTy

Answer 4

警告：本问题中的答案相当过时。

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

因此，不再建议使用这种方法。

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

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

然而，如果您在准备好并加载图像后想要调用一些代码，则此代码将无法正常工作。

- Abkarino

---

这是我遇到的问题。$(window).on("load"...永远不会在document ready函数内触发。 - Michelangelo