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) { }
}

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

1 个答案: