当滚动页面到底部时如何加载disqus？

Question

我发现一些使用jekyll技术的博客在评论区使用了disqus，而且只有在滑动到页面底部时才会加载评论区。

我该如何实现这个效果呢？

我尝试过类似下面的方法：

<div id="disqus_thread"></div>
<div id="disqus_loader" style="text-align: center">
<button onclick="load_disqus()">Load Disqus Comments</button>
<script>
function load_disqus()
{
  var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
  dsq.src = "http://[YOUR-DISQUS-SHORTNAME].disqus.com/embed.js";
  (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
  var ldr = document.getElementById('disqus_loader');
  ldr.parentNode.removeChild(ldr);
}
</script>
</div>

一个点击按钮来加载disqus评论系统。但我想知道当我滚动到页面底部时如何自动加载它。

- McKay Wei

---

你尝试过什么？你有一个可展示一些代码的正常评论部分吗？ - Wez

我只得到了来自 Disqus 的通用代码。我尝试过像点击按钮来加载 Disqus 这样的东西。 - McKay Wei

Answer 1

借助Javascript：如何检测浏览器窗口是否滚动到底部？

var disqus_loaded = false;

function load_disqus()
{
  disqus_loaded = true;
  var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
  dsq.src = "http://[YOUR-DISQUS-SHORTNAME].disqus.com/embed.js";
  (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
  var ldr = document.getElementById('disqus_loader');
  ldr.parentNode.removeChild(ldr);

}

window.onscroll = function(e) {
    if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
        //hit bottom of page
        if (disqus_loaded==false){ load_disqus() };
    }
};

- bwest

---

这个方法存在问题，没有停止点。每次我滚动到页面底部时，Disqus都会不断地重新加载。 - McKay Wei

添加了一个快速更改来防止这种情况发生。 - bwest

我看过“alert”示例，在那种情况下它能正常工作是因为当js被加载时页面高度不会改变。但在我的情况下，当Disqus加载后，页面高度再次发生变化，所以如果我在Disqus加载完成后向下滚动到底部，它将再次加载Disqus。 - McKay Wei

你能发布一下你的更新代码吗？一旦 disqus_loaded 变为 true，页面高度的变化也不会再次触发代码。例如：http://jsbin.com/ebepez/3/edit - bwest

我不使用Disqus，因为它会增加页面加载时间。现在我可以使用上面的脚本吗？还是像McKey所提到的那样存在问题？请提供最终代码。这个怎么样：https://gist.github.com/omgmog/2310982 - Satya Prakash

Answer 2

如果你想要更灵活的方式（需要jQuery），你可以考虑设置一个触发点，而不是让用户滚动到底部。

$('.end-of-jekyll-post').waypoint(function(direction) {
  load_disqus();
});

- Jeff K