flickr의 이미지 배열이 의도 한 순서대로 표시되지 않습니다.

저는 서문을 시작하고 싶습니다. 저는 JS로 시작한 총 초보자입니다. 지금은 며칠 만 작업하고 있습니다.flickr의 이미지 배열이 의도 한 순서대로 표시되지 않습니다.

여기에 어떻게 내가 원하는 것은 자신의 이름으로 각 문자의 사람의 이름과 디스플레이 이미지를 얻을 수있다 http://jsfiddle.net/joyroyxw/

함께 일하고 있어요거야. 지금까지 나는 이름을 개별 글자로 분리하고 "편지"를 검색 태그로 연결하여 flickr이 각 글자의 이미지를 반환 할 수있게했습니다.

내 이미지가 순서대로 추가되지 않는 문제는 하나의 쿼리가 다른 쿼리보다 빠르게로드되기 때문일 수 있습니다. 각 글자가 순서대로 표시되도록 버퍼 나 지연을 어떻게 추가 할 수 있습니까? for 루프가 태그를 함수에 순서대로 보내는 경우 왜 그렇게할까요? 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>

자바 스크립트로 필요에 따라 요소를 동적으로 만들 수 있습니다. 그런 다음 순서대로 채 웁니다. 당신이가는대로 단순히 증분하십시오.

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

UPDATE

귀하의 jsfiddle는 듯했으나 당신은 아약스 비동기 기억해야합니다. 여기에/ 내가 가진 무엇 :

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>

자바 스크립트

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의 이미지 배열이 의도 한 순서대로 표시되지 않습니다.

답변

관련 문제