vendredi 30 janvier 2015

Array of images from flickr not showing in the intended order


I'd like to preface I'm a total beginner with JS, only been working with it for a few days now.




Here's what I'm working with http://ift.tt/1yEOyas


What I want to do is get a person's name and display images of each letter in their name. So far I'm able to split the name into the individual letters, and concatenate "letter," as search tags, so that flickr returns images of each letter.


My problem is these images are not being added in order, could this be because one query loads faster than another? How could I add a buffer or delay so that each letter is displayed in order? Why would it do that if my for loop is sending the tags to the function in order?




Javascript from 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 = "http://ift.tt/1yR5z6i?";

$.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]);
}

});




Aucun commentaire:

Enregistrer un commentaire