admin管理员组

文章数量:1327843

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.

Share Improve this question edited Feb 24, 2013 at 16:51 bwest 9,8543 gold badges30 silver badges59 bronze badges asked Feb 20, 2013 at 10:34 McKay WeiMcKay Wei 635 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

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