How do I control number of loaded items with jQuery/JSON and Infinite Scroll?

Question

Using some examples I found on this site, I was able to piece together a sort of working version of this (see below), but it's not doing what I'd like.

I guess my real question is how do I control the number of items to initially load and the number to load on each event thereafter? Right now it loads the number of items seeming based on the number in the JSON URL I'm pugging in and then, with each progressive scroll, just loads the first item in that series twice (why?) and then loads the same 10 again and again.

I'm also using the NailThumb plugin, as you'll see below, which works fine.

Any direction or suggestions?

$(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});
                            });





                    }
                }
            );
        }
});

Makes sense, but changing that doesn't seem to change what I'm getting back. — Chris
– Chris, Commented Jul 26, 2014 at 19:11
It's just an RSS feed run through a Yahoo Pipes converter. It looks like this: pipes.yahoo.com/pipes/… where the 100 is the number of items it'll return. The headlines and other items I've drilled into work just fine in terms of showing up, and I had a static page that worked well. I just want to be able to to load a week's worth of news (sometimes 100-200 items) onto a page without slowing things down to a crawl. — Chris
– Chris, Commented Jul 26, 2014 at 20:14

Fabricator · Accepted Answer · 2014-07-26 21:45:35Z

Clone the original pipe and added offset parameter: https://pipes.yahoo.com/pipes/pipe.info?_id=ea940c37d5e8a39daffbfb45865b3d12 enter image description here

You can use offset like the following:

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

Collectives™ on Stack Overflow

How do I control number of loaded items with jQuery/JSON and Infinite Scroll?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related