flickrの動的イメージに「読み込み」イメージを追加

Question

flickrを使用して生成された動的イメージの読み込みイメージを表示する方法はありますか？私はhttp://community.wacom.com/サイトでこの作業用バージョンを見にきましたが、私は彼らが何をしているかを見るためにコードを見つけることができませんでした。

Answer 1

読み込み中のgifを示す画像を作成できます。次に、別のイメージを作成し、イメージのロードイベントを使用します。これは、あなたにコールバックを提供し、いつフリッカー画像が準備完了であるかを通知します。その後、flickrから画像の読み込み用gifをスワップアウトします。

jsonフィードをURLに使用してjsonオブジェクトを反復処理する場合は、ロジックを変更する必要がありますが、これによりコアの理解が得られるはずです。

HTML 
<image id="image1" src="someLoad.gif" /> 

js 
$('<img />').attr('src', 'someImageFromFlickr.jpg').load(function(){ 
    $('#image1').attr('src', this.src); 
}) 

Answer 2

あなたのページには、フリッカー画像と読み込み画像（またはテキスト）の2つの画像を置くことができます。あなたは最初からflickrイメージを隠すでしょう（私は$(selector).hide()か、またはCSSのdisplay:noneがうまくいくと思います）。 flickrイメージのロードハンドラでは、hide()読み込みイメージとshow() flickrイメージです。

Answer 3

私は最初に、動的イメージ用のコンテナの背景イメージを読み込むためにCSSを使用してみます。