5

defer="" html 属性を使用して javascript ファイルを延期できることは知っていますが、それは IE でのみサポートされており (lol)、それは javascript ファイルのみを延期します。プラグイン全体の読み込みを延期する必要があります。

これを行う方法はありますか？Facebook との統合などは気に入っていますが、プラグインはとても遅いです。ロード時間は2倍以上です。

ありがとう！〜ジャクソン

<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 を読み込みます。要素がページに追加されるとすぐに、ファイルのダウンロードが開始されます。この手法の重要な点は、ダウンロードが開始された場所に関係なく、他のページ プロセスをブロックすることなく、ファイルがダウンロードされて実行されることです。ページの残りの部分に影響を与えることなく、このコードをドキュメントの に配置することもできます (ファイルのダウンロードに使用される 1 つの HTTP 接続を除く)。

この本: Nickolas Zakasによる「High Performance JavaScript」には、JavaScript のパフォーマンス最適化に関する興味深い情報がたくさんあります。

于 2011-07-27T04:37:42.230 に答える
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 に答える
1

2 つの解決策として、スクリプト要素を作成します (JS を非同期的にロードします)。

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

また、script タグを直接記述します。

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

両方の例は、Steve Souders 著のEven Faster Websitesブックからのものです。

于 2011-07-27T04:40:41.363 に答える
0

すべてのタグをページの最後、タグのすぐ上に移動します</body>。これにより、インライン スクリプトが UI などをブロックするのを防ぐことができます。

于 2011-07-27T04:36:40.773 に答える