Question

让我们考虑以下情况：

<img>标记中有一个2.5MB的图像，我的连接速度很慢，下载该图像需要相当长的时间。如果我将document.ready()放在head标签中，那么它会等待下载图像，还是会在下载所有HTML时触发？

如果在下载所有HTML时触发，我该如何避免它？

如何在2.5MB数据传输后激活.ready()功能？

Answer 1

$(document).ready(...)

DOM is loaded时触发（即使多媒体尚未加载）

$(window).load(...)

当所有content is loaded时（当显示加载过程的进度指示器消失时）触发

Answer 2

引用the documentation for ready()：

虽然JavaScript在呈现页面时提供了用于执行代码的加载事件，但在完全接收到所有资产（如图像）之前，不会触发此事件。 [...]传递给.ready（）的处理程序保证在DOM准备就绪后执行[...]

所以是的，它可能会在图像被加载之前触发（毕竟这就是它的用途）。它甚至明确地解决了这个问题：

如果代码依赖于加载的资源（例如，如果需要图像的尺寸），则应将代码放在load事件的处理程序中。

load()的文档位于：http://api.jquery.com/load-event/

Answer 3

与Documentation：

一样

当JavaScript提供load事件时执行代码页面呈现，此事件在所有资产之前都不会被触发如图像已被完全接收。在大多数情况下，只要DOM层次结构完全可以运行脚本构造

加载<img>标签时是这样，但不是图像的实际数据。

加载图像并在加载事件时触发事件的示例：

<img data-src="images.jpg" />
<img data-src="images.jpg" />

$(document).ready(function() {
  $("img").load(function() {
    alert('image loaded');
  }).each(function() {
    $(this).attr("src", $(this).attr("data-src"));
  });
});

Answer 4

加载DOM后和加载页面内容（html）之前，$(document).ready()内的所有内容都会加载。

document.ready什么时候真的开火？

4 个答案: