How to load more pages from the Reddit API?

Question

I have a simple question. I am fairly new to the entire API area and I am working with the Reddit API at the moment. What I want to do is basically load more than just one page of the subreddit I am pulling JSON from. I apologize in advance if this is a duplicate question.

This is what I have so far:

$.getJSON("http://www.reddit.com/r/pics/.json?jsonp=?", function(data) {
    $.each(data.data.children, function(i,item){
        $("<img/>").attr("src", item.data.url).appendTo("#images");
    });
});

You can see a live JsFiddle here: Reddit JSON

My question is:

How can I load more content from other pages? [I believe it is only showing page #1] Can anyone here give me a link or a JsFiddle that shows how to do it?

Also, if anyone here is feeling generous, my aspiration is to fetch more information as the person keeps scrolling down.

Thank you.

Answer 1

You can use the after parameter like

var lastId;

function load(params) {
    params = params || {};
    $.getJSON("http://www.reddit.com/r/pics/.json?jsonp=?", params, function (data) {
        var children = data.data.children;
        $.each(children, function (i, item) {
            $("<img/>").attr("src", item.data.url).appendTo("#images");
        });
        if (children && children.length > 0) {
            lastId = children[children.length - 1].data.id;
        } else {
            lastId = undefined;
        }
    });
}

load();

$('.after').click(function () {
    if (lastId) {
        load({
            after: 't3_' + lastId
        });
    }
})

Demo: Fiddle

See this answer