5

我知道您可以使用 defer="" html 属性来延迟 javascript 文件，但它仅在 IE (lol) 中受支持，并且只会延迟 javascript 文件，我需要延迟整个插件的加载。

有没有办法做到这一点？我喜欢 Facebook 集成等，但插件太慢了。它使加载时间增加了一倍以上。

谢谢！〜杰克逊

<div class="socialplugins"><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="DesignSweeter">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</div>

<div class="socialplugins">
<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=218305128208494&amp;xfbml=1"></script><fb:like href="http://designsweeter.com/" send="false" layout="box_count" width="55" show_faces="true" font=""></fb:like>
</div>

<div class="socialplugins">
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<g:plusone size="tall" count="true"></g:plusone>
</div>

注意： .socialplugins 类仅用于在我的标题中定位。

4

4 回答 4

4

以非阻塞方式动态加载 javascript 文件：

http://berklee.github.com/nbl/

或者

https://github.com/rgrove/lazyload/

这种技术有点像这样：

 var script = document.createElement("script");
 script.type = "text/javascript";
 script.src = "file1.js";
 document.getElementsByTagName("head")[0].appendChild(script);

这个新元素加载源文件 file1.js。将元素添加到页面后，文件就会立即开始下载。这种技术的重要之处在于，无论从哪里开始下载，文件的下载和执行都不会阻塞其他页面进程。您甚至可以将此代码放在文档中而不影响页面的其余部分（除了用于下载文件的一个 HTTP 连接）。

这本书：Nickolas Zakas的“高性能 JavaScript”有很多关于 JavaScript 性能优化的有趣信息。

于 2011-07-27T04:37:42.230 回答
1

两种解决方案，创建一个脚本元素（它将异步加载 JS）：

var scriptElem = document.createElement('script'); 
scriptElem.src = 'http://anydomain.com/A.js'; 
document.getElementsByTagName('head')[0].appendChild(scriptElem);

并且还直接写脚本标签：

document.write("<script type='text/javascript' src='A.js'><\/script>");

这两个例子都来自 Steve Souders 的Even Faster Websites一书。

于 2011-07-27T04:40:41.363 回答
1 
/*
* Google Plus
* http://www.google.com/intl/en/webmasters/+1/button/index.html
* */
(function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();

/*
* Facebook
* https://developers.facebook.com/docs/reference/plugins/like/
* */
(function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
    fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

/*
 * Twitter
 * http://twitter.com/about/resources/buttons
 * */
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
于 2012-08-23T01:57:39.977 回答
0

将所有标签移到页面末尾，</body>标签正上方。这应该可以防止内联脚本阻塞 UI 等。

于 2011-07-27T04:36:40.773 回答