jquery - 如何使用 jQuery/JSON 和无限滚动控制加载项目的数量？

Question

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

我想我真正的问题是如何控制最初加载的项目数量以及此后每个事件加载的项目数量？现在，它根据我输入的 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});
                            });





                    }
                }
            );
        }
});

Answer 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