在 Google App Engine 中使用 Jquery 顺序加载图像

Question

解决方案： 我使用 setTimeout(ajaxcall,timeoutmillis) 而不是立即进行所有 ajax 调用。 图像已完美更新。没问题。 永远不要在没有给浏览器一些喘息时间的情况下循环发送多个 ajax 请求。 :)

我正在使用 javascript 将多张图片上传到 Google App Engine。我正在发送图像 一一发送到服务器，并一一接收服务器的响应。响应 包含加载图像的缩略图链接。我希望能够一一显示这些缩略图。问题是，例如，如果我有 100 张图像，则在从服务器收到第 100 个响应之前不会显示图像。直到那时页面的行为就好像它正在加载某些东西但图像不可见。不过，在 Ajax 调用完成后，所有图像都会显示出来。

更新：我发现不是那么优雅的解决方法。如果您使用创建图像占位符 一些虚拟图像并稍后在ajax加载期间更改img src，它可以工作。不是很优雅的解决方案，但如果您添加 1 像素的不可见图像，效果将或多或少相同。

这是代码。

this.handlephotoupload = function(input) {
    var uploadedfiles = input.files;
    var toolarge = "";
    var maxsize = 10240000;
    var counter = 1;
    var downloadcounter = 0;
    var rownumber = 0;
    var images=new Array();
    var arraycount=0;
    var totalimagecount=0;
    $("#phototable").append("<tr><td><div id=loading>Loading images please wait......</div></td></tr>");
    for(var i = 0; i < uploadedfiles.length; i++) {
        if(uploadedfiles[i].size > maxsize) {
            toolarge += uploadedfiles[i].name + "\n";
            totalimagecount+=1;
        } else {
            var filedata = new FormData();
            filedata.append("uploadimage", uploadedfiles[i]);
            $("#loading").show();
            $.ajax({
                url : 'photodownloader',
                data : filedata,
                cache : false,
                contentType : false,
                processData : false,
                type : 'POST',
                success : function(receiveddata) {
                    var imagedata = JSON.parse(receiveddata);
                    var data = imagedata['imageinfo'];
                    var imagelink = data['imagelink'];
                    var thumbnaillink = data['thumbnailLink'];
                    var imageID = data['uniqueID'];
                    var imagename = data['imagename'];
                    if(downloadcounter % 3 == 0) {
                        rownumber += 1;
                        var row = $('<tr id=thumbnailsrow' + rownumber + '></tr>');
                        $("#phototable").append(row);
                    } else {
                        var row = $("#thumbnailsrow" + rownumber);
                    }
                    //images[arraycount++]'<td><a href=' + imagelink + '><img src=' + thumbnaillink + '/></a></td>')
                    var curid="imgload"+downloadcounter;
                    //$("#loadimg").append("<div id="+curid+"></div>");
                    //$("#loadimg").append("<img src="+thumbnaillink+"></img>");
                    //$("#"+curid).hide();
                    //$("#"+curid).load(thumbnaillink);
                    $(row).append('<td align=center><a href=' + imagelink + '><img src=' + thumbnaillink + '/></a></td>');
                    //$("#"+curid).remove();
                    downloadcounter+=1;
                    totalimagecount+=1;
                    if(totalimagecount==uploadedfiles.length){
                        $("#loading").hide();
                    }
                }
            });
        }
    }
    if(toolarge != "") {
        alert("These images were not uploaded due to size limit of 1MB\n" + toolarge);
    }
}

Answer 1

如果您想要单独的响应，则必须提出单独的请求。

但不要一次异步触发 100 个请求，只需触发 X 并保持一个计数器，您可以使用计时器检查该计数器。每次收到响应时，您都会减少该计数器，并且每次计时器击中时，您都可以简单地触发 X - counter 请求。这样你一次只有 X 个并发请求...