来自 flickr 的图像数组未按预期顺序显示

Array of images from flickr not showing in the intended order

本文关键字：顺序 显示 flickr 图像 数组 来自      更新时间：2023-09-26

我想先说一下，我是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]);
            }
});

不要使用 append，而是尝试已经构建一个占位符元素来接收数据。

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

});
相关文章：