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);