在用户单击时，将一块javascript加载到页面中

我在我的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>

---

单击按钮时，您可以将外部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>

点击
函数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）；
}
这其实并不难。现在需要延迟加载JavaScript或外部内容，以便更快地加载页面。例如，有一些Facebook/twitter插件，我想在我的页面加载后加载它们，所以一种方法是在jQuery中初始化外部插件加载或$（window）.load

在您的例子中，在comment按钮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);
}


函数createframe（）{
var i=document.createElement（“iframe”）；
i、 src=”http://www.adilmughal.com";
i、 滚动=“自动”；
i、 frameborder=“0”；
i、 宽度=“90%”；
i、 高度=“220px”；
文件.getElementById（“容器”）.appendChild（i）；
}

这将使用任何src URL创建一个新的iframe元素，并附加为容器的子元素

输出和代码也可以在
上查看。我已经查看了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 -->


fyre=LF({
站点id:xxxxx，
版本：“1.0”
});

如果是，请尝试将其更改为：

<!-- 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 -->


$（函数（）{
fyre=LF({
站点id:xxxxx，
版本：“1.0”
});
});

这只会使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> 


$（函数（）{
var articleId=fyre.conv.load.makeArticleId（null）；
fyre.conv.load（{}[{
el:‘livefyre评论’，
网络：“livefyre.com”，
站点ID:“xxxxxx”，
articleId:articleId，
签名：假，
集合元：{
articleId:articleId，
url:fyre.conv.load.makeCollectionUrl（）
}
}]
，函数（）{}）；
})();    

同样，我们的想法是在尝试初始化之前等待页面交互。让我们知道会发生什么！
哪种类型的评论插件？或者它的代码在哪里？初始化插件通常做什么？只需在页面中包含javascript元素？或者您还必须在自己的页面中为其调用初始化函数javascript（
commentSystem.initialise（）
或类似版本）？您使用的是jQuery吗？如果不是，我强烈建议您学习并使用它。@AspiringAqib注释插件由livefyre@Beejamin通常在html页面中包含javascript。请您分析一下上面的内容好吗？@Mel:the over addScript（）函数只需创建一个script元素并将其附加到网页的head元素，您可能需要将newScript.src设置为外部JavaScript链接。我在原始帖子中包含了上面的livefyre代码块。我确实移动了它（只是JavaScript部分）在一个名为lifyre.js的文件中，然后将您的示例放在html中，将newScript.src='etc…替换为newScript.src='js/lifyre.js'；这不起作用。我真的不知道我在这里要做什么。很抱歉不能按照您的说明操作..帮助？（编辑，因为cat坐在键盘边缘，仍在打字）zor.livefyre.com/wjs/v3.0/javascripts/livefyre.js“>（函数（）{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:articleId:article