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 enter image description here

您可以使用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

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

1 个答案: