Wie wird disqus geladen, wenn zum unteren Seitenrand geblättert wird?

Question

Ich sehe einige jekyll powered Blogs verwenden disqus für Kommentare und wo der Kommentarbereich nicht geladen wird, bis Sie zum Ende der Seite scrollen.

Wie kann ich das angehen?

Ich habe so etwas wie dies versucht:

<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> 

Ein Klick, um die Disqus zu laden. Aber ich frage mich, wie kann ich es laden, wenn ich bis zum Ende der Seite blättern.

Answer 1

Mit Hilfe von 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

Für ein wenig mehr Flexibilität (erfordert jQuery), möchten Sie vielleicht einen Wegpunkt in Erwägung zu ziehen, anstatt den Benutzer zu erfordern den ganzen Weg nach unten zu scrollen.

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