gpt4 book ai didi

javascript - flickr 中的图像数组未按预期顺序显示

转载 作者:行者123 更新时间:2023-12-01 05:44:28 25 4
gpt4 key购买 nike

我想先说一下,我是 JS 的初学者,现在才使用它几天。

<小时/>

这是我正在处理的内容http://jsfiddle.net/joyroyxw/

我想要做的是获取一个人的名字并显示他们名字中每个字母的图像。到目前为止,我可以将名称拆分为各个字母,并将“字母”连接为搜索标签,以便 flickr 返回每个字母的图像。

我的问题是这些图像没有按顺序添加,这可能是因为一个查询加载速度比另一个查询加载速度快吗?如何添加缓冲区或延迟以便每个字母按顺序显示?如果我的 for 循环按顺序将标签发送到函数,为什么会这样做?

<小时/>

来自 jsfiddle 的 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){

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

});

最佳答案

不要使用追加,而是尝试构建一个占位符元素来接收数据。

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

您可以根据需要使用 JavaScript 动态创建元素。然后按顺序填充它们。只需在进行时增加 i 即可。

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

更新

你的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);

}


});

关于javascript - flickr 中的图像数组未按预期顺序显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28221484/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com