在Google App Engine中使用Jquery按順序加載圖像

解決方案：我使用setTimeout（ajaxcall，timeoutmillis）而不是立即創建所有ajax調用。圖像更新完美。沒問題。 永遠不要在循環中發送多個ajax請求，而不會讓瀏覽器有一點時間呼吸。 :)在Google App Engine中使用Jquery按順序加載圖像

我使用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); 
    } 
}

來源

2012-03-04 specialscope

如果您的加載img設置爲顯示圖片，則會顯示每個請求，因此看起來像它永遠不會被隱藏 – charlietfl 2012-03-04 17:05:49

我想要圖片添加到此行 $（row）.append（''） – specialscope 2012-03-05 03:00:07

請不要在您的問題中發佈解決方案，將其添加爲回覆並將其標記爲已接受。 – 2012-03-06 11:15:33

如果您需要單獨的回覆，您必須提出單獨的請求。

不要一次性異步觸發100個請求，只要觸發X並持有一個計數器，並使用計時器來檢查。每次收到回覆時，您都會減少該計數器，並且每次計時器命中時，您都可以簡單地觸發X - counter請求。這樣，您一次只能同時請求X個...

來源

2012-03-05 03:08:19

我正在提出不同的要求，並獲得單獨的回覆。問題是我不能用通常的方式反映HTML中的響應。感謝您的提示，儘管不要使用異步請求來重載服務器。 – specialscope 2012-03-05 06:06:38

你究竟是什麼意思？'問題是我不能用通常的方式在HTML中反應響應'？ – 2012-03-05 06:13:09

我的意思是說，我發送請求1，並接收響應1，縮略圖鏈接是在響應1，我正在添加縮略圖鏈接到HTML使用， $（row）.append（''）這應該在html頁面中立即顯示縮略圖，但它不會。它只有在收到所有回覆後才顯示出來。我在我的更新中寫道，如果在創建請求之前添加了圖像佔位符，則此功能完美無缺。 – specialscope 2012-03-05 06:34:06

在Google App Engine中使用Jquery按順序加載圖像

回答

相關問題