jquery - 什么触发了 jQuery 的 ready() 函数？

Question

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

好吧，它看起来不像那样，我只是在体验：在我的页面中上传大图片并为我的就绪功能添加警报。在后台的图像完成下载之前，警报似乎正在飞溅......这是一种等待代理用户和http webserver之间的通信停止调用就绪函数的方法吗？我的意思是我想让访问者等待一个大的黑色 div 并在其中“加载”文本，直到输出所有元素（然后释放 div）。

Answer 1

当所有 DOM 元素都被加载时， ready事件被触发，但在这些元素引用的任何图像完成加载之前不会触发。您可能想改用load事件，它会等到图像加载完毕。请注意文档中的警告。

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

前任：

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

Answer 2

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

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

Answer 3

window.onload加载页面上的所有内容时调用。所以是 DOM、脚本、css 和图像。

document.ready在 DOM 完成构建时调用，因为它处于可以操作/访问的阶段。所以在这种情况下img，加载的 html 而不是图像资源。

您可以load为该图像做一个事件：

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

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

});

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

$(window).load(function(){

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

});

Answer 4

它只是用于 DOM 准备就绪时，而不是在所有资源都已加载时。检查此以了解如何检查图像是否已加载：

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

Answer 5

ready在所有 DOM 完全构建后触发的事件。如果您想等到图像加载完毕，您可以使用load事件

Answer 6

正如您在带注释的源代码中看到的那样，jQuery 就绪只是为大多数浏览器的DOMContentLoaded事件添加了一个侦听器，而对于 ol' IE，它添加了 onreadystatechange 和 onload。

从 MDN 文档中，“DOMContentLoaded 事件在文档完全加载和解析时触发，无需等待样式表、图像和子框架完成加载”

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