Массив изображений из flickr, не отображаемый по заданному заказу

Я хотел бы предисловие. Я начинаю начинать с JS, работаю с ним всего несколько дней.Массив изображений из flickr, не отображаемый по заданному заказу

Вот что я работаю с http://jsfiddle.net/joyroyxw/

То, что я хочу сделать, это получить имя и отображать изображения человека каждой буквы в имени. До сих пор я мог разделить имя на отдельные буквы и объединить «письмо» в качестве поисковых тегов, чтобы flickr возвращал изображения каждой буквы.

Моя проблема заключается в том, что эти изображения не добавляются по порядку, может быть, это связано с тем, что один запрос загружается быстрее другого? Как я могу добавить буфер или задержку, чтобы каждая буква отображалась в порядке? Зачем это делать, если цикл for для отправки меток в функцию по порядку?

Javascript из jsfiddle:

function getQueryStringVar(name){ 
    var qs = window.location.search.slice(1); 
    var props = qs.split("&"); 
    for (var i=0 ; i < props.length;i++){ 
     var pair = props[i].split("="); 
     if(pair[0] === name) { 
      return decodeURIComponent(pair[1]); 
     } 
    } 
} 

function getLetterImage(tag){ 

var flickerAPI = "https://www.flickr.com/services/feeds/photos_public.gne?jsoncallback=?"; 

      $.getJSON(flickerAPI, { 
       tags: tag, 
       tagmode: "all", 
       format: "json" 
      }) 
      .done(function (flickrdata) { 
       //console.log(flickrdata); 
       var i = Math.floor(Math.random() * flickrdata.items.length); 
       var item = flickrdata.items[i]; 
       var url = item.media.m; 
       console.log(url); 
       $("body").append("<img src="+ url + "></img>"); 
       }); 

} 

$(document).ready(function() { 
     var name = getQueryStringVar("name") || "Derek"; 

      var str = "letter,"; 
      var searchtags = new Array() 
      for (var i = 0; i < name.length; i++) { 
       //console.log(str.concat(searchtags.charAt(i))); 
       searchtags[i] = str.concat(name.charAt(i)); 
      } 
      for (var j = 0; j < name.length; j++){ 
      //getLetterImage(searchtags[j]); 
      getLetterImage(searchtags[j]); 
      } 

});

источник

2015-01-29 DerekMartian

Вместо добавления, попытайтесь иметь держатель элемента место уже строить для получения данных.

<div id="img1">Loading</div> 
<div id="img2">Loading</div> 
<div id="img3">Loading</div>

Вы можете динамически создавать элементы по мере необходимости с помощью javascript. Затем вы заполняете их в порядке. Просто добавьте i, когда идете.

$("#img"+i).html("<img src="+ url + "></img>");

UPDATE

Ваш jsfiddle был очень близок, но вы должны помнить, что Ajax является асинхронной.

HTML

<body> 
    <h1>Hi! What's your name?</h1> 

    <form action="trending.html"> 
     <input class="textbox" type="text" name="name"> 
    </form> 

    <div id="img0">Loading</div> 
    <div id="img1">Loading</div> 
    <div id="img2">Loading</div> 
    <div id="img3">Loading</div> 
    <div id="img4">Loading</div> 

    </body>

Javascript

function getQueryStringVar(name){ 
    var qs = window.location.search.slice(1); 
    var props = qs.split("&"); 
    for (var i=0 ; i < props.length;i++){ 
     var pair = props[i].split("="); 
     if(pair[0] === name) { 
      return decodeURIComponent(pair[1]); 
     } 
    } 
} 

function getLetterImage(tag, theNumber){ 

var flickerAPI = "https://www.flickr.com/services/feeds/photos_public.gne?jsoncallback=?"; 

      return $.getJSON(flickerAPI, { 
       tags: tag, 
       tagmode: "all", 
       format: "json" 
      }) 
      .then(function (flickrdata) { 
       //console.log(flickrdata); 
       var i = Math.floor(Math.random() * flickrdata.items.length); 
       var item = flickrdata.items[i]; 
       var url = item.media.m; 
       $("#img"+theNumber).html("<img src="+ url + "></img>"); 
       }); 
} 



$(document).ready(function() { 
     var name = getQueryStringVar("name") || "Derek Martin"; 

      var str = "letter,"; 
      var searchtags = new Array() 
      for (var i = 0; i < name.length; i++) { 
       searchtags[i] = str.concat(name.charAt(i)); 
      } 
      for (var j = 0; j < name.length; j++){ 
       getLetterImage(searchtags[j], j); 

      } 


});

источник

2015-01-29 18:26:36 paperpusher

Это не работает для меня, я, возможно, неправильно, что вы сказали:/ Вот что у меня есть: http://jsfiddle.net/ zjm3qvhd / – DerekMartian

Массив изображений из flickr, не отображаемый по заданному заказу

ответ

Смежные вопросы