0

在 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">在我向下滚动时加载内容，例如延迟加载，等等每个 next <div>。就像在 mashable.com 上一样

我尝试使用 jscroll 和 Infinite Scroll jQuery Plugin，但我不知道如何使它工作。

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

4

2 回答 2

1

使用滚动事件处理程序，然后使用 scrollTop() 和 innerHeight() 来确定您是否在 div 的末尾。当您调用另一个负载时。

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

     if($(this).scrollTop()+ $(this).innerHeight() >= $(this).scrollHeight)
                  $("#s2").load("/2013/page/2/ article.item-list");
});
于 2013-03-19T23:43:09.520 回答
0

从 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>`
于 2013-03-20T07:54:46.150 回答