Решение : я использовал setTimeout (ajaxcall, timeoutmillis) вместо того, чтобы делать все вызовы ajax мгновенно.Изображения были обновлены отлично.Нет проблем. Никогда не отправляйте несколько запросов ajax в цикле, не давая браузеру время для дыхания. :)
Я загружаю несколько изображений в Google App Engine с помощью JavaScript.Я отправляю изображения по одному на сервер и получаю ответы от сервера по одному.Ответ содержит ссылку на миниатюру загруженного изображения.Я хочу, чтобы эти эскизы отображались по очереди.Проблема в том, что, например, если у меня есть 100 изображений, изображения не отображаются, пока не получен 100-й ответ от сервера.До этого страница ведет себя так, как будто она загружает что-то, но изображения не видны.Все изображения отображаются после завершения вызова Ajax.
Обновление : я нашел не очень элегантный обходной путь.Если вы создадите заменители изображения с каким-то фиктивным изображением и измените img src позже во время загрузки ajax, это сработает.Не очень элегантное решение, но если вы добавите невидимое изображение размером 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);
}
}