Question

很抱歉，如果之前已经回答了这个问题，但是所有搜索都会讨论这些差异，如果可能的话，不要将两者结合使用。

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

在加载DOM之后我应该做一些事情但是我想在图像加载完成后才显示某些元素。在资源管理器8中唯一有效的方法是将$(window).load函数放在$(document).ready内部以及其他所有函数。

这是可接受的做法吗？

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

我在Explorer 8中遇到很多问题。

Answer 1

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

Answer 2

修改

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

jQuery .ready() event：


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

jQuery .load() event method：


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明确询问这种安排是否会引起问题。事实并非如此。

Answer 3

我最近遇到了这个问题......来自 jQuery版本3 ，我们无法再将$（window）.on（＆＃39; load＆＃39;）放入document.ready（）...因为就绪处理程序是异步调用的，这意味着可以在加载后调用ready。

来自 jQuery核心团队：Github: jQuery 3 issues

要清楚，我们了解造成这种情况的原因。我们最近做好了准备   处理程序异步启动。这具有难以实现的优点   放弃。缺点是就绪处理器有时会发射   在load事件之后，如果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
});

Answer 4

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

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

因此不再建议使用此方法。

一种方法是使用以下代码

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

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

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

4 个答案: