dom:loaded 在发起最后一个 <img> 请求之前不会触发。（原型 js）答案

【问题标题】：dom:loaded not firing until the last <img> request is initiated. (prototype js)dom:loaded 在发起最后一个 <img> 请求之前不会触发。（原型 js）
【发布时间】：2011-01-03 03:46:29
【问题描述】：

我正在处理一个包含 60 多个图像的页面，并且 dom:loaded 事件直到最后一个图像请求被启动（未完全加载，这是预期的）才会触发。在较慢的连接上（使用一些节流器来模拟这一点）非常明显。 dom:loaded 事件会触发页面上的 javascript 交互，我希望尽早进行。

这似乎不是预期的行为，因为图像标签已经呈现在页面上（它在页面源中）。还是这样？

【问题讨论】：

标签： javascript events dom prototypejs

【解决方案1】：

不，在图像文件完全下载之前，浏览器不会认为<img> 标记已完全呈现。是的，这是记录在案的预期行为。

如果您想要原型中的 onDomReady 功能，请查看此脚本：http://www.skyrocket.be/download/prototype.domReady.js

另一种选择，有些人不喜欢这样，所以我冒着反对这种说法的风险，就是把你的脚本放在文档的末尾。 Javascript 在遇到时执行，文档的构建方式相同，因此文档末尾的 javascript 块意味着脚本可以访问其上方的所有 DOM 节点。

请注意，根据 HTML 规范，在文档正文中包含一个脚本块是完全有效和正确的，如果您这样做，您的页面将验证。事实上，Yahoo 和 Google 都建议在文档末尾放置脚本块以缩短页面呈现时间。有些人不知何故觉得这样做很丑陋。而我过去也有同样的感觉。但美在旁观者的眼中。

【讨论】：

Prototype 已经有一些东西可以处理这个问题，即 document.observe('dom:loaded', function() { dostuff(); }。这是正在使用的东西。它会在支持的浏览器上触发 DOMContentLoaded一旦加载了dom，但在加载图像之前。我要问的是为什么在启动对最终图像的请求之前不会触发此事件。它必须与DOM树的创建方式有关。跨度>
不确定，但看看 domready 脚本，它看起来在 IE 中做了一些不同的事情。无论如何，如果一切都失败了，编辑我的帖子以提供另一种方法。
那是因为 IE 不会触发 DOMContentLoaded。找出 IE 的“domready”事件的典型方法是将setInterval 与doScroll() 调用一起使用。在 DOM 准备好之前，这不会起作用。
可怕的doScroll hack 在某些情况下可能会失败。你在使用 iframe 吗？哪些浏览器正在等待完全加载？