Jak załadować disqus po przewinięciu do dolnej części strony?

Question

Widzę, że niektóre blogi zasilane energią jądrową używają disqus do komentowania i gdzie sekcja komentarzy nie ładuje się, dopóki nie przewiniesz na dół strony.

Jak mogę się do tego zbliżyć?

Próbowałem coś takiego:

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

jedno kliknięcie, aby załadować Disqus. Ale zastanawiam się, w jaki sposób mogę go załadować, gdy przewijam na dół strony.

Answer 1

z pomocą 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

Dla trochę większej elastyczności (wymaga jQuery), warto rozważyć ustawienie waypoint zamiast zmuszania użytkownika do przewijania aż do dna.

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