6

我看到一些由 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。但我想知道当我滚动到页面底部时如何加载它。

4

2 回答 2

7

在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() };
    }
};
于 2013-02-21T17:09:34.317 回答
2

为了获得更多的灵活性（需要 jQuery），您可能需要考虑设置一个航点，而不是要求用户一直滚动到底部。

$('.end-of-jekyll-post').waypoint(function(direction) {
  load_disqus();
});
于 2013-02-23T19:08:57.097 回答