使用 Jquery for Instagram API 一张一张加载图片答案

【问题标题】：Load Image One By One with Jquery for Instagram API使用 Jquery for Instagram API 一张一张加载图片
【发布时间】：2014-01-13 16:25:25
【问题描述】：

我正在使用 Jquery 基于主题标签从 Instagram API 中提取图像，并在包装器中一张一张地动态添加每张图像，但它全部加载。

<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2 /jquery.min.js"></script>
<script type="text/javascript">
$.ajax({
    type: "GET",
    dataType: "jsonp",
    cache: false,
    url: "https://api.instagram.com/v1/tags/sometag/media/recent?client_id=xxxxxxx",
    success: function(response) {
  $.each(response.data, function() {

         $('#target').append($('<div><ul><li> <a href="' + this.link + '" target="_blank"><img src="' + this.images.thumbnail.url + '" /></a></li><li>Likes:' + this.likes.count + '</li></ul></div>' ).hide().fadeIn(5000));

//Tried this as well
         //$('<div><ul><li> <a href="' + this.link + '" target="_blank"><img src="' + this.images.thumbnail.url + '" /></a></li><li>Likes:' + this.likes.count + '</li></ul></div>' ).appendTo('#target').hide().fadeIn(5000);

})
}

});

</script>
</head>
   <body>

   <div id="target"></div>

   <div>test</div>

    </body>
    </html>

我希望它类似于 Lexical Gap：http://lasvegas-now.jit.su/

【问题讨论】：

标签： jquery image dynamic instagram

【解决方案1】：

是的，因为过渡太快了，以至于您无法看到一张一张加载的图像。看看http://api.jquery.com/delay/

【讨论】：

我试过$('my_html_code').hide().delay(1000).appendTo('#target').show();，但还是不行