1

HTML ページにサードパーティのコメント プラグインを追加しています。プラグインは、ページがコメント プラグインをロードするために行う接続の数が原因で、ページロードを多少遅くします。

コメント プラグインは div 内に含まれます。

訪問者が「コメントの追加/読み取り」ボタン/リンクをクリックするまで、コメント JavaScript の読み込みを遅らせたいと考えています。

ページの言語は html5 です。可能であれば、自分のページを .html のままにしておきたいです。ページは html5 と css3 です。

私の ccs3 と html5 の知識は平均的です。私のjavascriptの知識は貧弱です。私が手掛かりを持っていない他のすべての言語。

「コメントの追加/読み取り」ボタン/リンクを用意し、サードパーティのコメントプラグインをロードして複製ページをロードする予定でしたが、これは面倒な方法であると感じ、さらに時間を追加しました (別のページロードプラグイン スクリプト) を使用して、ユーザーがコメントできるようになるまで待機します。

ユーザーがボタンをクリックするまで、バックグラウンドであっても、このコメントプラグインをまったくロードしたくありません。この理由は、コメント プラグインが表示されずにページの読み込みが完了したときに、ページがハングしている/まだ読み込まれているという兆候をユーザーに見せたくないためです。

これが誰かがフォローするのに理にかなっていることを心から願っています。

回答をいただければ幸いです。お時間をいただきありがとうございます。

以下は、html に挿入するために livefyre から提供されたコードです。

<div id="SPLUG"> <--- that is the div i am surrounding the comment plugin in


<div id="livefyre-comments"></div>
<script type="text/javascript" src="http://zor.livefyre.com/wjs/v3.0/javascripts/livefyre.js"></script>
<script type="text/javascript">
(function () {
    var articleId = fyre.conv.load.makeArticleId(null);
    fyre.conv.load({}, [{
        el: 'livefyre-comments',
        network: "livefyre.com",
        siteId: "xxxxxx",
        articleId: articleId,
        signed: false,
        collectionMeta: {
            articleId: articleId,
            url: fyre.conv.load.makeCollectionUrl(),
        }
    }], function() {});
}());
</script>
<!-- END: Livefyre Embed -->


</div>
4

3 に答える 3

2

ボタンをクリックすると、Web ページに外部 JavaScript を動的に挿入できます。

<button onclick="addScript()">Click</button>

<script type="text/javascript">
    function addScript() {
        var headTag = document.getElementsByTagName("head")[0];         
        var newScript = document.createElement('script');
        newScript.type = 'text/javascript';
        newScript.src = 'http://code.jquery.com/jquery-1.9.1.min.js';
        headTag.appendChild(newScript);
    }
</script>
于 2013-02-07T04:24:07.133 に答える
0

それは本当に難しいことではありません。ページの読み込みを高速化するには、JavaScript または外部の読み込みを遅らせる必要があります。たとえば、ページがロードされたらロードしたい Facebook/Twitter プラグインがあるため、jQuery の場合はwindow.onloadまたは $(window.load) でロードする外部プラグインを初期化する方法があります。

あなたの場合、コメント ボタンの onclick イベントで、外部プラグインの JavaScript を読み込みます。通常、ドキュメント オブジェクト モデル (DOM) を使用して要素を操作します。

例として、ボタンのクリック時に iframe をロードしたい:

<input type="button" id="btnComment" onclick="createframe();" style="height:50px; width:120px;" value="Click Me!" />
<div id="container"></div>


function createframe() {
    var i = document.createElement("iframe");
    i.src = "http://www.adilmughal.com";
    i.scrolling = "auto";
    i.frameborder = "0";
    i.width = "90%";
    i.height = "220px";
    document.getElementById("container").appendChild(i);
}

これにより、任意の src URL を使用して新しい iframe 要素が作成され、コンテナーの子として追加されます。

出力とコードは、 http://jsfiddle.net/adilmughal/ZJZn7/でも表示できます。

于 2013-02-07T04:41:57.973 に答える
0

liveFire のドキュメントを見てみましたが、ページが読み込まれるときではなく、クリックするだけで簡単に初期化できるようです。

ただし、liveFyre は実際にはできるだけ早く初期化します。ページの準備が整うのを待つのではなく、適切に動作します。これが、ページの読み込みを遅くする理由である可能性が非常に高いです。liveFyre コードは次のようになっていますか?

<!-- START: LiveFyre Embed -->
<script type="text/javascript" src="http://livefyre.com/wjs/javascripts/livefyre.js"></script>
<script type="text/javascript">
  fyre = LF({
    site_id: xxxxx,
    version: '1.0'
  });
</script>
<!-- END: LiveFyre Embed -->

その場合は、次のように変更してみてください。

<!-- START: LiveFyre Embed -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="http://livefyre.com/wjs/javascripts/livefyre.js"></script>
<script type="text/javascript">
  $(function(){
    fyre = LF({
      site_id: xxxxx,
      version: '1.0'
    });
  });
</script>
<!-- END: LiveFyre Embed -->

これにより、ページが初期化を試みる前に、ページがインタラクティブになるまで livefyre が待機するようになります。十分に (またはまったく) 役に立たないかもしれませんが、最初に試すのは安全で簡単なオプションです。十分に役に立たない場合は、返信してください。「クリック時に初期化」オプションを検討します。

- - アップデート - -

コード スニペットのコメントに基づいて、これを試してください (コメントが少し壊れていると思います - うまくいけば、これを問題なく翻訳できます:

<script type="text/javascript" src="zor.livefyre.com/wjs/v3.0/javascripts/livefyre.js">
<script type="text/javascript"> 
  $(function(){
    var articleId = fyre.conv.load.makeArticleId(null);
    fyre.conv.load({}, [{
      el: 'livefyre-comments',
      network: "livefyre.com",
      siteId: "xxxxxx",
      articleId: articleId,
      signed: false,
      collectionMeta: {
        articleId: articleId,
        url: fyre.conv.load.makeCollectionUrl()
        }
      }]
      , function() {});
  })();    
</script>

繰り返しますが、初期化を試みる前に、ページがインタラクティブになるのを待つだけです。何が起こるか教えてください！

于 2013-02-07T06:10:14.620 に答える