Question

我试图搜索，但我可以帮忙...

我的HTML代码是：

//<![CDATA[
window.onload=function(){
$("[data-instagram]").each(function(el) {
  $.getJSON({
    method: 'GET',
    url: $(this).data("instagram"),
    dataType: 'jsonp',
    success: function(response) {
      $('.fotorama').append('<img src="' + response.thumbnail_url + '">');

	  $('.fotorama').fotorama();

    }
  });
})
}//]]>

<!-- 1. Link to jQuery (1.8 or later), -->
      <script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

<!-- fotorama.css & fotorama.js. -->
<link  href="http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.css" rel="stylesheet"> <!-- 3 KB -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.js"></script> <!-- 16 KB -->



<span data-instagram="https://api.instagram.com/oembed/?url=https://www.instagram.com/p/BNijakrAX5y/?taken-by=nba"></span>
<span data-instagram="https://api.instagram.com/oembed/?url=https://www.instagram.com/p/BNlZYpDgwr_/?taken-by=nba"></span>
<span data-instagram="https://api.instagram.com/oembed/?url=https://www.instagram.com/p/BNlTnGFAqQ4/?taken-by=nba"></span>
<span data-instagram="https://api.instagram.com/oembed/?url=https://www.instagram.com/p/BNlFOilgZ3b/?taken-by=nba"></span>

<!-- 2. Add images to <div class="fotorama"></div>. -->
<div class="fotorama" data-auto="false">
    

</div>
<!-- 3. Enjoy! -->

正如您所看到的，在html中，我使用属性data-instagram的<span>个元素很少。脚本找到每个span元素与data-instagram并通过JSON / ajax将instagram图像加载到<div class="fotorama"></div>

我尝试初始化fotorama画廊，但看起来它不会正确初始化。

我尝试通过将data-auto="false"属性添加到fotorama div来关闭自动初始化，并将$('.fotorama').fotorama();添加到脚本代码中，但它不起作用。

我怎样才能做到这一点？谢谢，抱歉英文不好。

Answer 1

你很清楚异步。 javascript的本质所以我会直截了当地解释一下，请注意我已经删除了window.onload和一些不相关的东西以简化

$("[data-instagram]").each(function(el) {
    $.getJSON({
        //extra stuff hidden
        success: function(response) {
          $('.fotorama').append('<img src="' + response.thumbnail_url + '">');
          $('.fotorama').fotorama(); //1
        }
    });
});

$('.fotorama').fotorama();        // 2

setTimeout(function(){  $('.fotorama').fotorama(); },3000); // 3

您的代码扫描所有data-instagram获取其值并使用它来进行异步。成功调用instagram，你调用fotogram来初始化你的幻灯片，但问题是因为你正在加载很多图像 fotorama初始化会多次运行（每次成功）。首次初始化之后进一步的尝试只会弄乱滑块。请注意，如果你把它放在[2] foreach之外，那将无效，因为此时甚至第一个请求都将处于暂挂状态。

那你能做什么？那么最简单的（也是坏的：P也是）方法是删除[1]使用超时并在3秒后初始化说（同时显示加载器gif）看到[3]这里的问题是你不能相信网络所以更好的方法将使用一个计数器，其初始值将等于否。电话想要做。在每次成功回调时，将其减1，并检查它是否为0。当它为0时，你会启动fotogram

var count = $("[data-instagram]").length;

$("[data-instagram]").each(function(el) {
    $.getJSON({
       // other stuff 
       success: function(response) {
         $('.fotorama').append('<img src="' + response.thumbnail_url + '">');
         count--;
         if(count === 0 )
           $('.fotorama').fotorama();     //this was the last pending call,all images loaded. Initialize  
        }
   });
});

使用JSON / ajax加载的图像初始化fotorama

1 个答案: