前 3 大浏览器中的早期 appendChild 地狱答案

【问题标题】：Early appendChild hell in top 3 browsers前 3 大浏览器中的早期 appendChild 地狱
【发布时间】：2010-08-01 15:45:54
【问题描述】：

我正在尝试延迟加载 javascript，但无法使其可靠地工作。我的页面加载速度很快，我想保持这种状态，所以我不打算使用超时来延迟加载。除了document.readyState，如何确保 DOM 真正准备好进行修改？

方法一：

轮询就绪状态

createElement 脚本

src = 网址

将元素附加到头部

结果：

IE8：总是中止

FF3：第一次加载，每次都中止其他

Chrome：第一次加载，每次都中止其他

方法二：（lazyload包含在head标签中）

使用延迟加载加载

结果：

IE8：总是中止

FF3：有效

Chrome：第一次加载，每次都中止其他

【问题讨论】：

你可能需要展示一些代码。
你可能想看看here
我认为 Peter Michaux'The window.onload Problem (Still) 可能是一本好书。
我整天都在研究它，我的结论是，没有一个优雅的解决方案可以让用户在页面内容没有计时器黑客之前加载指定的脚本。无论如何都没有记录在案。我会留下这个问题，希望有人能提出一个创造性的答案。 @Pekka 这不是代码问题。这是浏览器的一个缺点。他们应该在内部阻止 appendChild，直到他们对文档的内部表示完成。

标签： javascript appendchild lazy-loading

【解决方案1】：

如果你把你的<script>标签放在</body>标签上面，你可以用DOM做大部分事情而不会引发任何错误，即任何高于<script>标签的东西通常都可以修改。

但是，如果您正在寻找更强大的解决方案，您可能会通过检查主要库如何检测 DOM 是否已准备好来取得一些进展，这里有一个适合初学者的解决方案 (jQuery)：http://github.com/jquery/jquery/blob/master/src/core.js#L393

【讨论】：

或使用window.onload 事件。
是的，但是window.onload 事件在所有图像（和其他资源）也已下载后等待触发，这通常不是您想要的，因为它需要的时间比它需要的长并可能降低用户体验。
我就是坚持不下来。看起来，浏览器报告说 DOM 已经准备好了，只是比实际情况要早一点。 appendChild 在 DOM 为 ready 之后太快了，它只是覆盖了我附加的节点。例如，在 IE8 中，它会覆盖 HEAD 并完全丢失 BODY。我适度超时工作。但接下来的问题是，多长是太长——多长是不够长？看起来我想到的功能将不得不被安排，直到出现一些事情......

【解决方案2】：

如果没有一个体面的框架来帮助您跨越差异，Javascript 几乎无法跨浏览器使用。今天最流行的可能是jquery，根据this tutorial，您可以使用$(document).ready()。在dojo，也很流行，你可以使用addOnLoad。依此类推……如果您不使用任何框架，那您的生活太难了：帮自己一个忙，选择一个您喜欢的 JS 框架！-)

【讨论】：

“几乎不可用”有点强。
@Tim，它很强大，但它充分反映了我的感受和经验：让跨浏览器 JS 正常工作，唯一的选择——做你自己的用户代理嗅探和浏览器错误解决方法——压倒您面向应用程序的工作，总是错过一些极端情况或其他情况，不断通过一些修复和一些新错误来发布新的浏览器版本——在 Q 的主题中使用“地狱”实际上比我的“哈迪”强得多（有些人会反对它发誓！-）但也非常恰当和准确（就像诅咒一样，恕我直言，当面对这样的混乱时；-)。
感谢您的输入 Alex，但我的问题实际上是加载框架！为了服务器的可移植性，这个想法是根据客户端可用的动态信息加载库。我意识到我可能对始终存在的卫星依赖关系投入了太多的信心等等......它已经成为我必须以一种或另一种方式知道的事情之一；可行吗？应该是的，所以我正在追求它！ :-)
@Ben，对于流行 JS 框架的延迟和最快加载，请参阅 code.google.com/apis/libraries 和例如有关这种延迟加载 jquery 的示例，请参阅tvidesign.co.uk/blog/…。
我仍然需要在客户端运行时加载谷歌的库加载器。