延迟加载第三方javascript

Question

是否有任何方法可以延迟加载第三方JavaScript文件，直到页面的其余部分加载完毕？

Answer 1

您可以附加到页面的onload事件，一旦触发，您可以动态地插入对文件的引用。

例如：

function loaded(){
   var el = document.createElement("script");
   el.src = "somefile.js";
   el.type="text/javascript";
   document.getElementsByTagName("head")[0].appendChild(el);
}

Answer 2

一种简单的方法是在html页面的末尾加载它们。

如果你想确保甚至首先加载像图像这样的内容，再加上一堆平滑的浏览器问题，那么jQuery库可以通过$(window).load() $.getScript()和$.getScript() 。

$(window).load( function() {
    $.getScript('your_3rd_party-script.js');
});

jQuery不是所有问题的答案，但它确实提供了一些很好的抽象。 例如，您将获得自动IE缓存清除（如果您需要），并且不必担心直接DOM操作方法的浏览器特定问题。

Answer 3

我必须为自己的网站做这个，我在这里记录了它：
http://tech.bluesmoon.info/2010/01/handling-documentwrite-in-dynamic.html

总而言之，您可以使用以下类型的第三方脚本来处理：

1. 与页面完美搭配的那些，或者根本不操纵DOM，创建自己的DOM节点，或者让你传递其所有内容都将进入的DOM节点的id，并等待直到该DOM节点出现在DOM中。

   您无需担心这些脚本。 您可以安全地异步加载它们，或者在onload或DOMContentReady事件触发后加载它们。 我个人更喜欢异步加载它们。

2. 那些使用document.write向页面添加内容的人。 这些脚本很烦人，但您可以通过将document.write别名化为附加到特定DIV的innerHTML属性的函数来处理它们。 我的文章谈到了这一点。

3. 在onload触发之前绝对必须在页面上的那些，通常是测量onload触发所需时间的脚本。 您将被要求使用常规脚本节点加载这些脚本，但是，请注意，测量onload的脚本实际上不应该是延迟onload的事情。 出于这个原因，我会说异步加载这些脚本，但是将异步加载器放在页面顶部（在HEAD中）部分。 这使它有机会在onload fires之前加载。

另外，请注意一点，如果在onload触发之前将异步添加到DOM中，异步添加的脚本仍将阻止onload，但是它们不会阻止任何其他内容加载。

Answer 4

您可以使用DEFER属性，该属性将暂停加载和执行脚本，直到页面的其余部分加载并准备好：

<script src="script.js" type="text/javascript" defer="defer"></script>

Answer 5

是的，jQuery有一个Ready方法可以解决这个问题： http ： //www.learningjquery.com/2006/09/introducing-document-ready