在MVC中顯示圖像，還能在等待時顯示/隱藏加載面板嗎？

Question

$('#ReportTest').attr("src", "../../Chart/HistoricalChart?ReportID=" + settings.id); 

這就是我想要的非常容易的方式。

$('#LoadingPanel').show(); 

$.ajax({ 
    url: "../../Chart/HistoricalChart", 
    data: "reportID=" + settings.id, 
    success: function (result) { 
     $('#LoadingPanel').hide(); 
     $('#ReportTest').attr("src", result); 
    } 
}); 

此代碼是在打破導致不包含圖像的路徑因此沒有加載，但我能顯示/隱藏加載面板在等待數據從服務器獲取。

有沒有一種方法可以輕鬆地組合這兩種方法？我目前正在返回一個文件，但我並不反對將圖像的路徑返回到#ReportTest中 - 但我只是想知道是否有更簡單的方法。

Answer 1

$('#LoadingPanel').show(); 
$('#ReportTest').bind('load', function() { 
    $('#LoadingPanel').hide(); 
    $(this).unbind('load'); 
}).attr('src', '../../Chart/HistoricalChart?ReportID=' + settings.id); 

，如果你想隱藏的錯誤（例如服務器返回404或500）的情況下，微調：

$('#LoadingPanel').show(); 
$('#ReportTest').bind('load', function() { 
    $('#LoadingPanel').hide(); 
    $(this).unbind('load'); 
}).bind('error', function() { 
    $('#LoadingPanel').hide(); 
    $(this).unbind('error'); 
}).attr('src', '../../Chart/HistoricalChart?ReportID=' + settings.id);