延迟加载第三方javascript

8

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

例如：

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

来源

2010-07-24 05:08:25

3

一个简单的方法是将它们加载到html页面的末尾。

如果你想确保像图片这样的内容先载入，加上一堆跨浏览器的问题，平滑启动，jQuery库使$(window).load()和$.getScript()这很容易。

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

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

来源

2010-07-24 05:06:01

+0

+1“jQuery不是所有问题的答案......” – TheHippo 2010-07-24 11:30:10

2

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

总结一下，有以下几种类型的第三方脚本来处理：

那些与页面很好地玩，或者根本不操纵DOM，创建或自己的DOM节点，或者让你传入一个DOM节点的ID，在这个DOM节点中它的所有内容都会去，并等到DOM节点出现在DOM中。

您不必担心这些脚本。您可以安全地异步加载它们，或者在onload或DOMContentReady事件触发后加载它们。我个人更喜欢异步加载它们。
那些使用document.write添加内容到页面。这些脚本很烦人，但是您通过将document.write别名为innerHTML附加到特定DIV的属性来处理它们。我的文章谈到这一点。
这些绝对必须在onload之前在页面上触发，通常是测量onload启动所用时间的脚本。系统会要求您使用常规脚本节点加载这些脚本，但是，请考虑一个衡量onload的脚本实际上并不会延迟onload。出于这个原因，我会说异步加载这样的脚本，但将异步加载器放在页面顶部（在HEAD）部分。这使它有机会在加载火灾之前加载。

另外，还要注意一个警告，异步添加脚本仍然可以阻止onload事件，如果他们加入到之前的onload发射的DOM，但他们不会阻止加载任何其他内容。

来源

2010-07-24 05:29:26 bluesmoon

0

是，jQuery有一个准备的方法来处理这样的：http://www.learningjquery.com/2006/09/introducing-document-ready

来源

2010-07-24 06:00:14 CarneyCode

1

可以使用defer属性，直到页面的其余部分被加载，并准备将停止脚本加载和执行：

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

来源

2010-07-24 20:42:46 LDJ

+0

是不是只有IE？ – bluesmoon 2010-07-24 21:02:39

+0

是的，它只支持IE – WSK 2011-10-14 18:52:29

延迟加载第三方javascript

回答

相关问题