如何在页面滚动中从Instagram延迟加载图像？

Question

I am trying to figure out how to do an endless scroll sort of effect when calling an API with ajax.

Right now, it only grabs the first 20. I need it grab the first 14, and then once the user gets to the bottom of the div, it get's another 14 (if there are 14 more to get).

Does anyone know how I can do this? Or at least the best way to show 14 more and so on once the user starts scrolling?

MAIN PAGE

<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>");
              }
            }
        });
    }

});

Answer 1

I answered my own question. Just have to grab the next_url data from the api and then call it when it reaches to the bottom of the div. Here is what I did to find out if the user is at the bottom of the div.

$('#container').bind('scroll', function()
{
    if($(this).scrollTop() + $(this).innerHeight()>=$(this)[0].scrollHeight) { }
}