0

ソーシャル ネットワーク用の次のコードの読み込みを遅らせようとしています: それでも動作します。

<div id="social">
<div id="socialButton"><div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=229705657056288&amp;xfbml=1"></script><fb:like href="http://example.com" send="false" layout="button_count" width="100" show_faces="false" font="arial"></fb:like>&nbsp;&nbsp;&nbsp;<<< Facebook Like</div>
<div id="socialButton"><g:plusone></g:plusone>&nbsp;<<< Google +1</div>
<div id="socialButton"><a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="example" ></a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script><<< Twitter Tweet</div>
<div id="socialButton"><a class="DiggThisButton DiggCompact"></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<<< Digg this</div>
<div id="socialButton"><script src="http://www.stumbleupon.com/hostedbadge.php?s=1"></script>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<<< Stumble Upon

</div>
</div>

これを行うために JS または Jquery を使用したいと考えており、$(document).ready(function() { }); を使用する予定です。ソーシャルネットワークをロードする前にドキュメントがロードされるようにします。

何を使用できるか、それをどのように実装できるかについてのアイデアはあります... div #socail を離れて、それに document.write を追加しようと考えていますが、どのようにそれを実行できるかわかりません。

すべての提案が流用されます。

4

6 に答える 6

1

JavaScript では、setTimeout を使用して遅延後にコードを実行できます。例えば：

setTimeout(function(){
    //use jQuery to generate that code block and append it to the document
}, 10000);

これにより、10,000 ミリ秒 (10 秒) 後に無名関数内のコードが実行されます。

別の方法として、通常どおりページ内でコードを実行し、非表示にすることもできます。選択した遅延の後、ソーシャル メディア要素を明らかにします。Facebook と Twitter のスクリプトが未知のコードを実行すると仮定したい場合があるため、これはおそらくより単純です。

于 2012-04-16T16:33:30.793 に答える
0

同様のシナリオで、ソーシャル ボタンを適切に機能させるために必要なスクリプトをロードする小さな関数を実装しました。

_MYNS.appendSocialWidget = function(id, url) {
   var js, fjs = document.getElementsByTagName('script')[0];
   if (document.getElementById(id)) { return; }
   js = document.createElement('script'); js.id = id;
   js.charset = "utf-8";
   js.src = url;
   fjs.parentNode.insertBefore(js, fjs);
};

イベントが発生するとdocument.ready、必要なすべてのプラグインをロードしました。

if ($('#social').length) {

    /* Facebook send and like */
    $('<div id="fb-root" />').appendTo($('body'));
    _MYNS.appendSocialWidget('facebook-jssdk', '//connect.facebook.net/it_IT/all.js#xfbml=1');

    /* twitter: tweet */        
    $('<a href="https://twitter.com/share" class="twitter-share-button">Tweet</a>').appendTo($('#social'));
    _MYNS.appendSocialWidget('twitter-widget', '//platform.twitter.com/widgets.js');

    /* Google : +1 */
    $('<div class="g-plusone" data-size="medium" data-annotation="bubble" \
        data-expandTo="top"></div>').appendTo($('#social'));
    _MYNS.appendSocialWidget('google-plusone', 'https://apis.google.com/js/plusone.js');

    ...
};

もちろんソーシャルボタンのないページもあったので、要素の有無を事前に確認しています。_MYNSグローバルスコープを汚染しないように、単純な名前空間です

ポイントに到達したかどうかはわかりませんが、とにかくこれが役立つことを願っています.

于 2012-04-16T16:34:20.393 に答える
0 
<div id="social">
</div>
<script id="socialTemplate" type="text/plain">
<div id="socialButton"><div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=229705657056288&amp;xfbml=1"></script><fb:like href="http://example.com" send="false" layout="button_count" width="100" show_faces="false" font="arial"></fb:like>&nbsp;&nbsp;&nbsp;<<< Facebook Like</div>
<div id="socialButton"><g:plusone></g:plusone>&nbsp;<<< Google +1</div>
<div id="socialButton"><a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="example" ></a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script><<< Twitter Tweet</div>
<div id="socialButton"><a class="DiggThisButton DiggCompact"></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<<< Digg this</div>
<div id="socialButton"><script src="http://www.stumbleupon.com/hostedbadge.php?s=1"></script>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<<< Stumble Upon
</script>
<script type="text/javascript">
window.addEventListener("load",function(){
document.getElementById("social").innerHTML = document.getElementById("socialTemplate").innerHTML;
});
</script>

socialTemplate には型text/plainがあるため、そのように扱われます。しかし、そのコンテンツを空のソーシャル タグに配置すると、ブラウザーはそれを初期化します。

于 2012-04-16T16:34:38.550 に答える
0

html()関数呼び出しですべてを平手打ちするだけです：

$(document).ready(function() {
    $('#social').html(
        '<div id="socialButton"><div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=229705657056288&amp;xfbml=1"></script><fb:like href="http://example.com" send="false" layout="button_count" width="100" show_faces="false" font="arial"></fb:like>&nbsp;&nbsp;&nbsp;<<< Facebook Like</div>' +
        '<div id="socialButton"><g:plusone></g:plusone>&nbsp;<<< Google +1</div>' +
        '<div id="socialButton"><a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="example" ></a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script><<< Twitter Tweet</div>' +
        '<div id="socialButton"><a class="DiggThisButton DiggCompact"></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<<< Digg this</div>' +
        '<div id="socialButton"><script src="http://www.stumbleupon.com/hostedbadge.php?s=1"></script>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<<< Stumble Upon/div>'
        );
});

<div id="social"></div>ページに を空のままにします。

于 2012-04-16T16:35:19.700 に答える
0

上記のもので修正できません。コードが破損し続けるか、ソーシャル div ではなくスクリプトの場所にコードが表示されます。

以下を遅延してロードし、残りをそのままにしておくことで、後でスクリプトをロードできるかどうか疑問に思っていました。

<script src="resources/scripts/main_script.js" type="text/javascript"></script>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
<script src="http://connect.facebook.net/en_US/all.js#appId=229705657056288&amp;xfbml=1"></script>

私の主な目標は

于 2012-04-17T04:20:35.840 に答える
0

タグでdefer属性を使用するだけです。<script>

<script type="text/javascript" src="https://apis.google.com/js/plusone.js" defer="defer"></script>

これにより、ページがレンダリングされた後にそれらが読み込まれます。

于 2012-04-24T13:57:15.360 に答える