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

Question

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

Steve Souders在本文中很好地描述了这个组合：http://www.stevesouders.com/blog/2008/12/27/coupling-async-scripts/

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

然而，Steve Souders的文章非常详尽，甚至还在继续讨论Lazy Loading。这意味着在页面加载之前不会下载外部脚本（因为添加到DOM的脚本元素是在window.onload中完成的）。这确保了事件处理程序的添加应该有效。

所以一切看起来都不错，但是我有一个琐碎的问题 - 假设我们已经等待加载页面，用户可以与页面进行交互，甚至可能在添加事件处理程序之前离开页面

我的唠叨是否是一个有效的问题？如果是这样，有没有一种强有力的方法来解决它？

谢谢， 保罗

Answer 1

您可以在加载DOM时将脚本元素添加到DOM。 只需在内联脚本中获取对head元素的引用，然后注入您的资源。 这样，您可以在呈现DOM时触发浏览器加载外部脚本。

你是对的，因为注入的脚本加载到内存中并不意味着DOMContentLoaded事件已被触发。 您必须侦听该事件，以便在加载所有外部资源时触发回调中与DOM相关的内容。