Cách tải disqus khi cuộn xuống cuối trang?

Question

Tôi thấy một số blog được hỗ trợ jekyll sử dụng disqus cho các nhận xét và nơi phần nhận xét sẽ không tải cho đến khi bạn cuộn xuống cuối trang.

Tôi làm cách nào để tiếp cận điều này?

Tôi đã thử một cái gì đó như thế này:

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

Một nút bấm để tải Disqus. Nhưng tôi tự hỏi làm thế nào tôi có thể tải nó khi tôi di chuyển đến dưới cùng của trang.

Answer 1

Với sự giúp đỡ từ 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

Đối với một ít linh hoạt hơn (yêu cầu jQuery), bạn có thể muốn xem xét việc thiết lập một điểm tham chiếu thay vì yêu cầu người dùng phải di chuyển tất cả các cách để phía dưới.

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