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

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

i see jekyll powered blogs utilize disqus comments , comments section won't load untill scroll bottom of page.

how can approach this?

i've tried 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 load disqus. i'm wondering how can load when scroll bottom of page.

with help javascript: how observe if browser window scrolled 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() }; } };

javascript disqus