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.

What have you tried? do you have a functioning comment section that you can show some code for? — Wez, Feb 20 '13 at 11:00
All I got is the universal code from disqus. I've tried something like a click button to load the disqus. — McKay Wei, Feb 21 '13 at 13:55

score 7 · Accepted Answer · edited May 23 '17 at 12:25

7

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

edited May 23 '17 at 12:25

Community

1
1

answered Feb 21 '13 at 17:09

bwest

9,182
3
28
58

There's problem with this method, there's no stop point. Disqus will load again and again everytime I scroll to the bottom of the page. – McKay Wei Feb 24 '13 at 09:11
Added a quick change to prevent that. – bwest Feb 24 '13 at 15:14
Still the same issue, its not preventing load_disqus from keep loading. – McKay Wei Feb 25 '13 at 01:07
I've seen the 'alert' example, in that case it works because the page height doesn't change when the js gets loaded. But in my case, after disqus loaded the page height changes again, so if I scroll down to the bottom after Disqus loads out, it will load Disqus again. – McKay Wei Feb 25 '13 at 07:45
Can you post your updated code? Once `disqus_loaded` is `true` it doesn't matter if the page height changes, the code won't run again. Example: http://jsbin.com/ebepez/3/edit – bwest Feb 25 '13 at 16:17
Awesome! I fixed up by removing this line `ldr.parentNode.removeChild(ldr);` in the function load_disqus. It works perfectly now. Many thanks for the help! – McKay Wei Feb 25 '13 at 20:06
Cool glad it's working! I think I understand what was happening now; removing that child element was firing a scroll event before `disqus_loaded` was set to `true`. If you move `disqus_loaded = true;` to the top of load_disqus() I bet you can put that line back in – bwest Feb 25 '13 at 20:17
I do not use Disqus because it increase the page load time. Can I use the above script now Or it is having problem as McKey has mentioned. Final code, please. How is this though: https://gist.github.com/omgmog/2310982 – Satya Prakash Sep 29 '13 at 13:39

score 2 · Answer 2 · answered Feb 23 '13 at 19:08

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

answered Feb 23 '13 at 19:08

Jeff K

543
2
12

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

2 Answers2