如何在頁面滾動中延遲加載Instagram上的圖片？

Question

我想弄清楚如何使用Ajax調用API時如何做無盡的滾動效果。

現在，它只抓取前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>"); 
       } 
      } 
     }); 
    } 

}); 

Answer 1

我回答我自己的問題。只需抓取api中的next_url數據，然後在達到div底部時調用它。這是我做了什麼來找出用戶是否在div的底部。

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