2011-02-15 95 views
20

对不起,如果这之前已经回答,但所有的搜索都谈论的差异,而不是如果可能的话一起使用两者。窗口内文件准备好了吗?

简单来说,$(window).load.(function() {})可以用于$(document).ready.(function() {})的INSIDE吗?

我有一些事情应该在DOM加载后完成,但是我只想在图像加载完成后才能显示某些元素。唯一能够在Explorer 8中工作的是将$(window).load函数放在$(document).ready之内。

这是一个可以接受的做法吗?

我只是想使用最可接受的方法来显示DIV包含小图像,如工具栏,它完全构建后。 (例如,visibilityhiddendisplaynone)。此DIV的HTML由$(document).ready中的代码编写,然后在使用$(window).load之前使用$('body').append()附加到主体。

我有很多的问题,浏览器8

回答

20

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

+0

感谢您的回答,它给了我所需要的信心着手重写我的剧本为更稳健。 – Sparky 2011-02-15 18:54:50

11

编辑:

注意:这个答案是只适用于jQuery的v2和下方。


jQuery .ready() event

处理程序传递给.ready()保证要执行 的DOM就绪后,所以这通常是连接的所有其他事件的最好的地方处理程序并运行其他jQuery代码。

jQuery .load() event method

load事件被发送到一个元件当它和所有的子元件已经 被完全加载。此事件可以发送到与URL相关联的任何元素 :图像,脚本,框架,iframe和窗口对象。

基于上面的jQuery文档上,我什么也没看见这将表明有以下任何问题:内部的ready根本保证

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

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

}); 

放置一个.load的DOM已准备就绪的时候load被解雇。

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

这最终可能更多的是个人偏好问题,但是OP明确地询问这种安排是否会导致问题。这并未证实是真实的。

+0

这是一个幻想的答案 – 2016-04-14 21:14:02

3

警告: 在这个问题的答案是相当过时的。

作为@ViRuSTriNiTy在评论中提到,此代码在jQuery 3中不再有效,并且在GitHub上被提及为问题。

所以这种方法不建议了。

一种方式来做到这一点是使用下面的代码

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

然而,这个代码将不能工作,如果你加载准备图像,并要拨打一些代码后完全加载。

0

我最近碰到这个问题...从jQuery版本3,我们不能再把$(window).on('load')放到document.ready()中......因为ready handler被调用异步,这意味着可以在加载后调用。

jQuery的核心团队Github: jQuery 3 issues

需要明确的是,我们的理解是什么导致了这一点。我们最近准备好 处理程序异步启动。这有好处,很难让 放弃。缺点是,如果加载事件足够快地触发,就绪处理程序有时会在加载事件后触发 。在这个问题中你看到的效果是 ,这是因为你在加载事件已经触发后绑定了​​一个加载事件 处理程序。

此修复程序将绑定准备就绪之外的负载。

这两种方法的应该叫:

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

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