异步加载JavaScript并与内联代码耦合

Question

“降级脚本标签”http://ejohn.org/blog/degrading-script-tags/和脚本DOM元素的组合是用于异步加载外部JavaScript并与内联代码耦合的一种很好的模式。

史蒂夫Souders的介绍很好地结合在本文中：http://www.stevesouders.com/blog/2008/12/27/coupling-async-scripts/

基本上一旦外部脚本加载网页上的脚本由外部脚本触发。我一直在想，如果外部脚本下载时运行的脚本尝试添加事件处理程序会发生什么情况。 DOM可能没有完成加载，因此添加事件处理程序可能会失败。

不过，Steve Souders的文章非常全面，甚至继续讨论Lazy Loading。这意味着外部脚本不会在页面加载之前下载（因为添加到DOM中的脚本元素在window.onload内完成）。这可以确保添加事件处理程序应该可以工作。

所以一切看起来不错，但我留下了一个小问题 - 因为我们等待页面加载，用户可以与页面交互，甚至可能在事件处理程序之前离开页面添加。

我有点担心吗？如果是这样，是否有强大的方法来解决它？

感谢， 保罗

Answer 1

您可以添加脚本元素到DOM它加载时。 只需在内联脚本中引用head元素并注入资源即可。 通过这种方式，您可以在DOM呈现时触发浏览器加载外部脚本。

而你说得对，因为注入的脚本被加载到内存中并不意味着DOMContentLoaded事件已经被触发。 您必须监听该事件才能在加载所有外部资产时执行与回调有关的DOM。