How to load disqus when scroll to the bottom of the page?

Question

I see some jekyll powered blogs use disqus for comments and where the comments section won't load untill you scroll to the bottom of the page.

How can I approach this?

I've 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>

A click button to load the disqus. But I'm wondering how can I load it when I scroll to the bottom of the page.

Answer 1

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

Answer 2

For a little more flexibility (requires jQuery), you might want to consider setting a waypoint instead of requiring the user to scroll all the way to the bottom.

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