jQuery追加gif，而ajax調用不適用於Chrome，Firefox。在IE中工作（儘管沒有動畫）

Question

$(document).ready(function(){ 
    $("#submit").click(function() { 

     var startDate = $("#startdate").val(); 
     var endDate = $("#enddate").val(); 
     var selected = $("#selected").val(); 

     $.ajax({ 
      type: "POST", 
      url: "/json/chart", 
      data: { 
       selected:selected, 
       startDate:startDate, 
       endDate:endDate 
      }, 
      success: function(data) { 

       $("#pkgLineDiv").empty().html("");     

       $.each(data, function(index) {       
        $('#pkgLineDiv').prepend('<img id="'+ index+'" src="/public/images/ajax-loader.gif" /><br />'); 
        $('#'+index).attr('src', 'chart/'+ data[index].pkgLineId +'/'+ data[index].wrapSpecId +'/'+ data[index].startDate +'/'+ data[index].endDate);     
       });       
      } 

     }); 
     return false;   
    }); 
}); 

這是我的代碼。我正在做一個ajax提交併獲取一些json數據。然後我將這些數據傳遞給圖表網址。此圖表網址是一個在後端生成圖片的功能。問題是這可能是一個漫長的過程。一個簡單的ajax加載圖像不起作用，因爲ajax調用很快（獲得一個快速的json數組）。在ajax調用之後會發生什麼，需要一段時間。我想要做的是獲得一張圖像來顯示圖像的位置。我不能擁有佔位符，因爲我不知道要創建多少圖像。

此代碼將在IE 8中工作。動畫不會播放，但至少圖像顯示最終圖像的位置。在Chrome和Firefox（我的主要測試環境）中，圖像根本不會顯示。有什麼我在這裏失蹤？謝謝。

編輯

：

 $("#pkgLineDiv").empty().html(""); //Empty all contents of the div to push new chart images  
       $.blockUI(); 
       $.each(data, function(index) {  

        var chartUrl = 'chart/'+ data[index].pkgLineId +'/'+ data[index].wrapSpecId +'/'+ data[index].startDate +'/'+ data[index].endDate; //Build chart URL 
        $('#pkgLineDiv').prepend(''+ data[index].description +'<div><img id="'+ index +'" src="/public/images/ajax-loader4.gif" /></div'); 


        $.get(chartUrl, function() {       
         $('#'+index).attr('src', chartUrl); 

         if (index == data.length - 1) { 
          $.unblockUI(); 
         }      
        });  
       }); 

Answer 1

我以前沒做過這個，所以我不能肯定地說，但也許嘗試最初設置的IMG索馬里紅新月會向loader.gif然後進行AJAX請求每個圖表'+'數據...（即圖表圖像），然後成功將src設置爲圖表圖像。如果圖表圖像的標題指示客戶端可以緩存該URL，那麼我相信它應該按照您想要的方式工作。

我相信問題是不同的瀏覽器如何處理img src的更改。如果在知道圖像已由服務器呈現並由客戶端緩存之前，您不更改src，則應該很好。

事情是這樣的：

$(document).ready(function(){ 

    $("#submit").click(function() { 

     var startDate = $("#startdate").val(); 
     var endDate = $("#enddate").val(); 
     var selected = $("#selected").val(); 

     $.ajax({ 
      type: "POST", 
      url: "/json/chart", 
      data: { 
       selected:selected, 
       startDate:startDate, 
       endDate:endDate 
      }, 
      success: function(data) { 

       $("#pkgLineDiv").empty().html("");     

       $.each(data, function(index) {       
        $('#pkgLineDiv').prepend('<img id="'+ index+'" src="/public/images/ajax-loader.gif" /><br />'); 

        var chartUrl = 'chart/'+ data[index].pkgLineId +'/'+ data[index].wrapSpecId +'/'+ data[index].startDate +'/'+ data[index].endDate; 

        $.get(chartUrl, function(data){ $('#'+index).attr('src', chartUrl); }); // get 


       }); // each       
      } // success 

     }); // ajax 
     return false;   
    }); // click 
}); // ready 

Answer 2

也許嘗試類似的BlockUI插件從http://jquery.malsup.com/block/

您可以手動設置在屏幕的封鎖和解鎖。