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个请求......

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

1 个答案: