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

【问题标题】：How to load disqus when scroll to the bottom of the page?滚动到页面底部时如何加载disqus？
【发布时间】：2023-04-05 12:33:02
【问题描述】：

我看到一些由 jekyll 提供支持的博客使用 disqus 作为 cmets，并且在您滚动到页面底部之前， cmets 部分不会加载。

我该如何处理？

我尝试过这样的事情：

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

【问题讨论】：

你试过什么？你有一个可以显示一些代码的功能性评论部分吗？
我得到的只是来自 disqus 的通用代码。我试过点击按钮来加载disqus。

标签： javascript disqus

【解决方案1】：

在Javascript: How to detect if browser window is scrolled to bottom?的帮助下

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() };
    }
};

【讨论】：

这个方法有问题，没有停止点。每次我滚动到页面底部时，Disqus 都会一次又一次地加载。
添加了一个快速更改以防止这种情况发生。
还是同样的问题，它不会阻止 load_disqus 继续加载。
我看过'alert'示例，在这种情况下它可以工作，因为页面高度在加载js时不会改变。但在我的情况下，disqus 加载后页面高度再次发生变化，所以如果我在 Disqus 加载后向下滚动到底部，它将再次加载 Disqus。
你能发布你更新的代码吗？一旦disqus_loaded 是true，页面高度是否改变都没有关系，代码将不会再次运行。示例：jsbin.com/ebepez/3/edit

【解决方案2】：

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

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

【讨论】：