1

我在我的 html 页面上添加了第三方评论插件。由于页面为加载评论插件而建立的连接数，该插件会稍微减慢页面加载速度。

评论插件将包含在一个 div 中。

我想延迟评论 javascript 的加载，直到访问者单击“添加/阅读评论”按钮/链接。

该页面的语言是html5。如果可能的话，我希望将我的页面保留为 .html 页面是 html5 和 css3。

我的 ccs3 和 html5 知识一般。我的javascript知识很差。我不知道的所有其他语言。

我本来打算使用“添加/阅读评论”按钮/链接，加载一个加载了第三方评论插件的重复页面，但觉得这是一种混乱的方式，并且增加了更多时间（然后再加载另一个页面）插件脚本）供用户等待才能发表评论。

在用户单击按钮之前，我根本不希望加载此评论插件，甚至在后台也不加载。这样做的原因是，当页面加载完成而评论插件不可见时，我不希望用户看到页面挂起/仍在加载的任何迹象。

我真诚地希望这对有人遵循是有意义的。

答案将不胜感激。感谢您的时间。

以下是livefyre给我插入到我的html中的代码..

<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

您可以在单击按钮时将外部 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 在尝试初始化之前等待页面是交互式的。它可能没有足够的帮助（或根本没有帮助），但首先尝试它是一个安全且简单的选择。如果它没有足够的帮助，请发回，我们将追求您的“点击初始化”选项。

- - 更新 - -

根据您对代码片段的评论，试试这个（我认为评论有点混乱 - 希望您可以将其翻译为 OK：

<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 回答