使用jQuery .load（）函数

Question

无限滚动在WordPress的博客页面，我试图加载使用jQuery .load（）函数的内容：

<div id="s1"> 1 </div> 
<div id="s2"> 2 </div> 
<div id="s3"> 3 </div> 

<script type="text/javascript"> 
$("#s1").load("/2013 article.item-list"); 
$("#s2").load("/2013/page/2/ article.item-list"); 
$("#s3").load("/2013/page/3/ article.item-list"); 
</script> 

直到这里，一切工作正常。
但是我想要从<div id="s2">加载内容，当我向下滚动时，就像延迟加载一样，对于下一个<div>等等。喜欢mashable.com

我试着用jscroll和无限滚动jQuery插件，但我无法弄清楚如何使这项工作。

请别人给我一个提示！ 在此先感谢。

Answer 1

使用滚动事件处理程序，然后使用scrollTop（）和innerHeight（）来确定您是否在div的末尾。当你打电话给另一个负载。

$('#s1').on('scroll', function(){ 

    if($(this).scrollTop()+ $(this).innerHeight() >= $(this).scrollHeight) 
        $("#s2").load("/2013/page/2/ article.item-list"); 
}); 

Answer 2

从krosullivan ideea，我做了这个代码，工作正常（演示：http://jsfiddle.net/w7X9N/272/）。

但是，当我在我的网站上测试这个，它不工作。我必须将height:500px;和overflow:auto;样式属性设置为<div="lazy">以使其工作（如在我的演示中）。

任何想法？

<div id="lazy"> 
<div id="s1">1</div> 
<div id="s2">2</div> 
<div id="s3">3</div> 
</div> 

<script type="text/javascript"> 
jQuery(
function($) { 
    $("#s1").load("/2013/ article.item-list"); 
    $('#lazy').bind('scroll', function() 
    { 
     if($(this).scrollTop() + $(this).innerHeight()>=$(this)[0].scrollHeight) 
     { 
      $("#s2").load("/2013/page/2/ article.item-list"); 
      $('#lazy').bind('scroll', function() 
      { 
       if($(this).scrollTop() + $(this).innerHeight()>=$(this)[0].scrollHeight) 
       { 
        $("#s3").load("/2013/page/3/ article.item-list"); 
       }         
      }) 
     }         
    }) 
}); 
</script>`