在滾動時看到/達到div時加載div內容

Question

在jQuery文檔頁面上，我注意到Disqus評論在我滾動到頁面的該部分之前不會打開。

向下滾動此頁面的底部，你會發現影響：http://api.jquery.com/child-selector/

我納悶這是怎麼做的，因爲我想用它在我的網站，因爲這將有助於減少網頁加載時間。

Answer 1

在看看源該網頁，開始上線461左右：

jQuery(function(){ 
    var ds_loaded = false, 
     top = jQuery("#comments").offset().top, 
     instructionsCloned = false; 

    function check(){ 
    if (!ds_loaded && jQuery(window).scrollTop() + jQuery(window).height() > top) { 
     jQuery.getScript("http://jquery.disqus.com/disqus.js?v=2.0&slug=child_selector_8220parent_child8221&pname=wordpress&pver=2.12"); 
     ds_loaded = true; 
    } else if (!instructionsCloned && document.getElementById('dsq-form-area')) { 

     var instructions = jQuery('ul.comment-instructions'); 

     instructions.clone().css({ 
     backgroundColor: instructions.css('backgroundColor'), 
     borderWidth: instructions.css('borderWidth'), 
     padding: '1em', 
     margin: '1em 0' 
     }).prependTo('#dsq-form-area'); 

     jQuery("#dsq-new-post > h3").text("Add a Contribution"); 

     instructionsCloned = true; 
    } 
    } 

    jQuery(window).scroll(check); 

    check(); 

}); 

他們首先獲得補償的意見div的頂部：

top = jQuery("#comments").offset().top 

然後他們定義一個名爲check()的函數，該函數檢查窗口的當前滾動高度，以及如果該值加上窗口高度大於偏移值，則會加載disqus腳本：

if (!ds_loaded && jQuery(window).scrollTop() + jQuery(window).height() > top) {...} 

然後他們這個check()功能綁定到scroll事件窗口：

jQuery(window).scroll(check); 

TL;博士：每當你滾動頁面，他們正在檢查的滾動的高度對抗的偏移高度評論div，如果它是可見的，那麼它加載disqus腳本（加載註釋）。

HTH :)