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和Infinite Scroll jQuery插件，但我无法弄清楚如何使这项工作。

请有人给我一个提示！提前谢谢。

Answer 1

使用scroll事件处理程序，然后使用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>`

使用jquery .load（）函数进行无限滚动

2 个答案: