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 に答える