是什么触发了jQuery ready()函数?

时间:2011-06-15 12:07:10

标签: jquery ready

我现在真的很困惑,我认为当页面结束加载所有内容时会触发jQuery(document).ready(function(){ ... })

嗯,它看起来并不像那样,我只是在体验:在我的页面中上传大图片并为我的准备功能添加警报。在下载后台中的图像完成后,警报似乎正在下降...是否可以等待代理用户和http网络服务器之间的通信关闭以调用就绪功能?我的意思是我想让访问者等待一个大的黑色div并在其中“加载”文本,直到输出所有元素(然后释放div)。

6 个答案:

答案 0 :(得分:4)

加载所有DOM元素时会触发ready事件,但在这些元素引用的任何图像加载完毕之前不会触发。您可能希望使用load事件,而这将等到图像加载完毕。请注意文档中的警告。

  

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

例如:

$(window).load( function() { ... do stuff ... } );

答案 1 :(得分:1)

根据我的理解,当dom加载时。这将包括所有脚本文件,我会假设css文件。但它不包括图像。我想知道使用window.onload = function(){}是否是更好的选择。

window.onload vs $(document).ready()

答案 2 :(得分:1)

当页面上的所有内容都已加载时,将调用

window.onload。所以DOM,脚本,CSS和图像。

当DOM完成构建时,会调用

document.ready,因为它处于可以被操作/访问的阶段。所以在这种情况下,img html被加载但不是图像资源。

您可以为该图片执行load事件:

$("#image").load(function(){

    $("#div_you_want_to_hide").hide();  

});

或者只是等待窗口完全加载:

$(window).load(function(){

    $("#div_you_want_to_hide").hide();  

});

答案 3 :(得分:0)

它只是在DOM准备就绪时,而不是在所有资源都已加载时。检查这一点以了解如何检查图像是否已加载:

http://www.stoimen.com/blog/2009/08/05/jquery-check-whether-image-is-loaded/

答案 4 :(得分:0)

在完全构造所有DOM之后触发

ready事件。如果您想等到图像加载完毕,可以使用load事件

答案 5 :(得分:0)

正如您在annotated source中所看到的,jQuery ready只是为大多数浏览器添加了DOMContentLoaded事件的监听器,而对于'IE',它会添加到onreadystatechange和onload。 / p>

从MDN文档中,“文档完全加载并解析后会触发DOMContentLoaded事件,而无需等待样式表,图像和子帧完成加载”

要等待整个页面,只需使用load侦听器或包装它的jQuery(window).load(...)