使用JSON/ajax加载的图像初始化fotorama [英] Initialize fotorama with images loaded by JSON/ajax

问题描述

我尝试搜索，但是我可以帮忙...

I tried to search but i can help with this ...

我的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中，我只有几个<span>元素，它们带有data-instagram属性.脚本发现每个span元素都带有data-instagram，并通过JSON/ajax将instagram图像加载到<div class="fotorama"></div>

As you can see, in html i have few <span> elements with atribute data-instagram. Script found each span element with data-instagram and load instagram images via JSON/ajax into <div class="fotorama"></div>

我尝试使用初始化fotorama gallery，但看起来无法正确初始化.

I tried to initialize fotorama gallery with, but it looks like it wont initialize properly.

我试图遵循 http://fotorama.io/customize/initialization/通过向fotorama div中添加data-auto="false"属性和将$('.fotorama').fotorama();添加到脚本代码中来关闭自动初始化，但是它不起作用.

I tried to folow http://fotorama.io/customize/initialization/ to turn off auto initialization by adding data-auto="false" atribute to fotorama div, and $('.fotorama').fotorama(); into script code but it doesnt work.

我该如何进行这项工作? 谢谢，抱歉英语不好.

How can i make this work? Thank you, sorry for bad english.

推荐答案

您可能会意识到异步. javascript的本质，因此我将对其进行简单说明，请注意，为简单起见，我删除了window.onload和一些无关的内容

You migh be aware of the async. nature of javascript so i will explain it straightforward , note that i've removed window.onload and some unrelated stuff for simplicity

$("[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也不起作用，因为此时即使第一个请求也将处于待处理状态.

Your code scans over all data-instagram takes its value and uses that to make an async. call to instagram on success of which you call fotogram to initialize your slide but the problem is that since you're loading many images fotorama initialization gets run more than once(on each success).After first initialization any further attempt would only mess up the slider.Note that if you put it outside[2] foreach that wouldn't work either because at this point even the first request would be in pending state.

那你该怎么办?好吧，最简单(也是最糟糕的:P也是)的方法是删除[1]使用超时并在3秒后初始化说(同时显示loader gif)，请参阅[3]问题，这里是您无法信任网络，因此是一种更好的方法将使用一个计数器，其初始值将等于no.想要拨打的电话数量.在每个成功的回调中，将其递减1并检查其是否为0.当它为0时，您将启动照片

So what can you do? Well the simplest(and bad :P too) way would be to remove [1] use a timeout and initialize say after 3 seconds ( meanwhile show a loader gif) see [3] problem here is you cannot trust the network so a better way would be to use a counter , initial value of which would be equal to the no. of calls want to make. On each success callback decrement it by 1 as well as checking if it's 0 .When it is 0 you fire up 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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！