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

admin管理员组

文章数量:1327965

I see some jekyll powered blogs use disqus for ments and where the ments 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/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.

I see some jekyll powered blogs use disqus for ments and where the ments 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./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.

• javascript
• disqus

Share Improve this question Follow edited Feb 24, 2013 at 16:51 bwest 9,85433 gold badges3030 silver badges5959 bronze badges asked Feb 20, 2013 at 10:34 McKay WeiMcKay Wei 6355 bronze badges 2

• What have you tried? do you have a functioning ment section that you can show some code for? – Wez Commented Feb 20, 2013 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 Commented Feb 21, 2013 at 13:55

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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./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() };
    }
};

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

本文标签： javascriptHow to load disqus when scroll to the bottom of the pageStack Overflow