Geek asks and answers

How to load disqus while scrolling down at the bottom of the page?

I see that jekyll blogs use disqus for comments and where the comments section does not load until you scroll to the end.

How can I approach this?

I tried something like this:

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

Click the button to download disqus. But I wonder how I can load it when I scroll to the bottom of the page.

+5
source share
2 answers

Using Javascript: how to determine if the browser window is scrolling from the 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() };
    }
};
+6
source

For more flexibility (jQuery required), you might want to set a waypoint instead of requiring the user to scroll to the end.

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

More articles:


All Articles