JavaScriptを使用した非同期イメージのロード

Question

Flickrを使用して生成された動的イメージの読み込みイメージを表示する方法はありますか？私はWacom Communityサイトに示されているようにそれを行う方法を見つけましたが、私はそれを動作させることができませんでした。もっと簡単なことがあるのですか、誰かが技術の創始者よりも良い説明を持っていますか？http://blog.realmofzod.com/asynchronous-image-loading-with-jquery/？

Answer 1

私はちょうどこれを働かせました。 YMMV：

<img src="images/blank.gif" onload="replaceImage(this, 'flickrthumbnailimageurl')" 
width="75" height="75" /> 

そしてreplaceImage：

function replaceImage(img, replacementImage) 
{ 
    img.onload = null; 
    img.src = replacementImage; 
} 

blank.gifだけ1x1ピクセル固体グレー画像です。基本的には、この空白のイメージが75×75に読み込まれ、展開されます（レイアウトを維持するため）。これはすぐにonloadハンドラを起動し、イメージのソースを目的のイメージに変更します。それはあなたが望む効果があります。

Answer 2

はjQueryを使ってそれを行うことができます：

<img src="http://myimages.com/loaderImage.jpg" id="imgIdLoading" /> 
<img src="http://flickr.com/image.jpg" id="imgId" style="display:none;" /> 

$('#imgId').load(function(){ 
    // ... loaded 
    $('#imgIdLoading').remove(); 
    $('#imgId').show(); 
}).error(function(){ 
    // ... not loaded 
    $(this).attr('src','/whatever/error.png'); 
});