如何使用 jQuery/JSON 和 Infinite Scroll 控制已加载项目的数量？答案

【问题标题】：How do I control number of loaded items with jQuery/JSON and Infinite Scroll?如何使用 jQuery/JSON 和 Infinite Scroll 控制已加载项目的数量？
【发布时间】：2014-07-26 18:54:28
【问题描述】：

使用我在这个网站上找到的一些示例，我能够拼凑出一种工作版本（见下文），但它并没有达到我想要的效果。

我想我真正的问题是如何控制最初加载的项目数量以及之后每个事件加载的数量？现在它会根据我要插入的 JSON URL 中的数字加载项目的数量，然后在每次渐进式滚动时，只加载该系列中的第一个项目两次（为什么？），然后再次加载相同的 10并再次。

我也在使用 NailThumb 插件，如下所示，效果很好。

有什么方向或建议吗？

$(window).scroll(function()
    {   
        if($(window).scrollTop() === $(document).height() - $(window).height())
        {
            start += count;

            $.ajax({
                dataType:'json',
                url: 'JSON-URL-HERE',
                success: function(data)
                {
                    for(var i=0; i<10; i++)
                    {
                        $('#mainNews').append(
                            '<div class="wrapper-class">'+
                            '<ul class="media-list">'+
                            '<li class="media">'+
                            '<a class="pull-left" href="' + data.value.items[i].link  + '">'+
                            '<div class="nailthumb-container square-thumb" height="120" width="120">'+
                            '<img src="images/green_app.jpg" class="media-object" width="120" height="120"></div>'+
                            '</a><div class="media-heading"><a href="' + data.value.items[i].link  + '">'+
                            '<h5 class="headline">' + data.value.items[i].title + '</h5></a></div></li></ul></div>'

                            );
                    }

                    i += start;

                        $(document).ready(function() {
                            $('.nailthumb-container').nailthumb({width:120,height:120,fitDirection:'top center'});
                            });

                        $('.media-list').waypoint(function() {
                            $('.nailthumb-container').nailthumb({width:120,height:120,fitDirection:'top center',replaceAnimation:null});
                            });





                    }
                }
            );
        }
});

【问题讨论】：

不应该是start += i吗？
有道理，但改变这一点似乎并没有改变我得到的回报。
您能展示一下您是如何构建url: 'JSON-URL-HERE', 部分的吗？
这只是一个通过 Yahoo Pipes 转换器运行的 RSS 提要。它看起来像这样：pipes.yahoo.com/pipes/… 其中 100 是它将返回的项目数。我钻研的标题和其他项目在显示方面做得很好，而且我有一个运行良好的静态页面。我只是希望能够将一周的新闻（有时 100-200 项）加载到页面上，而不会减慢速度。
您是否为每个查询指定了适当的偏移量？

标签： jquery ajax json infinite-scroll

【解决方案1】：

克隆原管道并添加offset参数：https://pipes.yahoo.com/pipes/pipe.info?_id=ea940c37d5e8a39daffbfb45865b3d12

你可以像下面这样使用offset：

var start = 0;
var count = 20;
var retrieve_content = function () {
    if (count <= 0) return;
    console.log('retrieve');
    start += count;
    $.ajax({
        dataType: 'json',
        url: 'https://pipes.yahoo.com/pipes/pipe.run?_id=ea940c37d5e8a39daffbfb45865b3d12&_render=json&count=' + count + '&feedurl=http%3A%2F%2Fonlineathens.com%2Fshoutem_week%2Ffeed%2F2&offset=' + start,
        success: function (data) {
            var len = data.value.items.length;
            if (len == 0) count = 0; // set count to 0 to prevent unnecessary requery
            for (var i = 0; i < len; i++) {
                $('#mainNews').append(
                    '<div class="wrapper-class">' +
                    '<ul class="media-list">' +
                    '<li class="media">' +
                    '<a class="pull-left" href="' + data.value.items[i].link + '">' +
                    '<div class="nailthumb-container square-thumb" height="120" width="120">' +
                    '</div>' +
                    '</a><div class="media-heading"><a href="' + data.value.items[i].link + '">' +
                    '<h5 class="headline">' + data.value.items[i].title + '</h5></a></div></li></ul></div>');
            }
        }
    });
};

$(window).scroll(function () {
    if ($(window).scrollTop() === $(document).height() - $(window).height()) {
        retrieve_content();
    }
});

retrieve_content();

fiddle

【讨论】：