jqueryでイメージをロードするには？

Question

イメージを読み込んでダイアログボックス内にイメージを表示するには、これを実行します。

<div id="image_preview" title="Client Photo Preview"> 
    <p><img src="" alt="client image" id="client_image_preview" /></p> 
</div> 

$("#client_image_preview").attr("src", imagelocation); 

$('#image_preview').dialog({ 
    height: 'auto', 
    width: 'auto', 
    modal: true, 
    dialogClass: 'titleless', 
    buttons: { "CLOSE": function() { $(this).dialog("destroy"); } } 
}); 

jQueryを使って画像をロードしながら、負荷のGIFを表示する方法はありますか？

よろしく

Answer 1

あなたimgタグで初期負荷GIF画像を設定します。次に、JavaScriptのImageオブジェクトとonloadイベントを使用してイメージをプリロードします。ターゲットイメージがプリロードされたら、imgタグのsrcをそのURIに置き換えます。

<div id="image_preview" title="Client Photo Preview"> 
    <p><img src="loading.gif" alt="client image" id="client_image_preview" /></p> 
</div> 

var img = new Image(); 
img.onload = function() { 
    $("#client_image_preview").attr("src", imagelocation); 
} 
img.src = imagelocation; 

$('#image_preview').dialog({ 
    height: 'auto', 
    width: 'auto', 
    modal: true, 
    dialogClass: 'titleless', 
    buttons: { "CLOSE": function() { $(this).dialog("destroy"); } } 
});