Answer by Srikukan Ajith for Adding Pagination or Lazy Load to Instagram feed

Here is some example code that supports Pagination and Lazy Load. You can find more information in this blog.

HTML:

<div class="instaFeedButton">
    <button id="previous-feeds" class="btn-feed"><</button>
    <button id="next-feeds" class="btn-feed">></button>
</div>
<br/><br/>                
<div id="instafeed" class="instagramFeed"></div>

JavaScript:

var nextButton = document.getElementById('next-feeds');
var previousButton = document.getElementById('previous-feeds');
var imgs = [];                          // store the images for caching
var currentPage = 1;
var loadedPage = 1;         //data cached pages    
if (currentPage < 2) {
    previousButton.setAttribute('disabled', 'disabled');
}
var feed = new Instafeed({
    get: 'tagged',
    tagName: 'srilanka',
    clientId: '467ede5a6b9b48ae8e03f4e2582aeeb3',
    resolution: 'thumbnail',
    limit: 5,
    template: '<a href="{{link}}" target="_blank"><img src="{{image}}" class="instagramImg"/></a>',
    after: function () {
        if (!this.hasNext()) {
            nextButton.setAttribute('disabled', 'disabled');
        }            
    },
    cachedPrevious: function () { // read the cached instagram data
        var previousImages = imgs.slice((currentPage - 1) * feed.options.limit, (currentPage) * feed.options.limit);
        $("#instafeed").html(previousImages);
    },
    cachedNext: function () {   // read the cached instagram data
        var nextImages = imgs.slice((currentPage - 1) * feed.options.limit, (currentPage) * feed.options.limit);
        $("#instafeed").html(nextImages);
    },
    success: function (data) {
        var images = data.data;
        var result;
        for (i = 0; i < images.length; i++) {
            image = images[i];
            result = this._makeTemplate(this.options.template, {
                model: image,
                id: image.id,
                link: image.link,
                image: image.images[this.options.resolution].url
            });
            imgs.push(result);
        }
    }
});

// bind the next button
nextButton.addEventListener('click', function () {
    $("#instafeed").fadeOut(100);
    $("#instafeed").empty();
    $("#instafeed").fadeIn(100);
    currentPage++;
    if (currentPage > 1) {
        previousButton.removeAttribute('disabled');
    }

    // if the data is not already loaded , get the feed by calling instagram api
    if (currentPage > loadedPage) {
        feed.next();
        loadedPage++;
    }
    // if the data is not already loaded , get it from there rather than calling api again 
    else        
        feed.options.cachedNext();
});

// the data will be always there before calling previous button, so take it from cache
previousButton.addEventListener('click', function () {
    currentPage--;
    $("#instafeed").fadeOut(100);
    $("#instafeed").empty();
    $("#instafeed").fadeIn(100);
    feed.options.cachedPrevious();

    if (currentPage < 2) {
        previousButton.setAttribute('disabled', 'disabled');
    }
});

feed.run();

CSS:

.instagramImg{
    height:148px;
    width:148px;
    padding: 0 3px 3px 0;
}

.instagramFeed{
    margin-top:5px;
    min-height:440px;
}

.instaFeedButton{
    float:left;
}

.instaFeedDesc{
    float:left;
}

.btn-feed{
    padding:2px 25px;
}

Here I have used the instafeedjs JavaScript library that allows to get the feeds whenever you need (Lazy Load) and have more control that way you need to load the feeds.