在滚动时看到/达到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 :)