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

让我们考虑以下情况：

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

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

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

Answer 1

 $(document).ready(...) 

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

 $(window).load(...) 

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

Answer 2

引用ready()的文档 ：

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

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

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

load()的文档在这里： http ： //api.jquery.com/load-event/

Answer 3

$(document).ready()都会在加载DOM并加载页面内容（html）之前加载。

Answer 4

如在文档中 ：

虽然JavaScript在呈现页面时提供了用于执行代码的load事件，但在完全接收到所有资产（如图像）之前，不会触发此事件。 在大多数情况下，只要完全构造DOM层次结构，就可以运行脚本。

所以当加载标签时，而不是图像的实际数据。

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

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