Как лениво загружать изображения из Instagram на страницу прокрутки?

Я пытаюсь выяснить, как сделать бесконечный эффект прокрутки при вызове API с ajax.

Прямо сейчас, он только захватывает первые 20. Мне нужно, чтобы он захватил первые 14, а затем, как только пользователь добрался до нижней части div, он получит еще 14 (если их еще 14).

Кто-нибудь знает, как я могу это сделать? Или, по крайней мере, лучший способ показать еще 14 и так далее, как только пользователь начнет прокрутку?

ГЛАВНАЯ СТРАНИЦА

<a id="popup" href="https://api.instagram.com/oauth/authorize/?client_id=CLIENT_ID&redirect_uri=http://localhost/instagramAjax.php&response_type=token">
    <img src="/images/instagram-login-button.png" />
</a>

<div style="padding:5px;width:340px;border:1px solid black;height:400px;overflow-y:scroll;">
    <ul id="photo-list"></ul>
</div>

instagramAjax.php

var token = window.location.href;
token = token.split("#access_token=");
window.opener.instagram(token[1]);
window.close();

Javascript

$(document).ready(function() {

    $("#popup").click(function(e) { 
      var url = $(this).attr('href');
       e.preventDefault();
       window.open(url, 'authWindow', "width=800,height=436");
    });

    function instagram(value)
    {
         var token = value;
         $.ajax({
            type: "GET",
             dataType: "jsonp",
             url: "https://api.instagram.com/v1/users/self/media/recent?access_token="+token+"",
             success: function(e)
            { 
              for (index in e.data) {
              $('ul#photo-list').append("<li><img src="+e.data[index].images.standard_resolution.url+" /></li>");
              }
            }
        });
    }

});