javascript - 「画像ギャラリー アプリ」で元の画像を読み込むまで「読み込み中」の画像を表示する - メトロ スタイル

Question

私は画像ギャラリーアプリケーションを開発しています..

インターネットから画像を読み込んでいます..

私がやっていることは、画像のURLを配列に収集し、それをリストビューにバインドすることです..

それは正常に動作します..しかし、私の問題は、画像をロードするまで画像に十字マーク（「X」）が表示されることです。

私が期待しているのは

1. 元の画像が読み込まれるまで、各画像の読み込み画像を表示します

2. 1が不可能な場合、どうすればバツ印を消すことができますか?

Answer 1

1 つの方法は、src を 1x1 ピクセルの透明な gif に設定し、寸法を最終的な画像サイズに設定し、背景画像を読み込み画像に設定し、JavaScript を使用して画像を読み込み、onloadプレースホルダー gif に交換することです。

例

HTML

<img src="images/spacer.gif" alt="Big Image" border="0" id="big_image" style="background-image:url('loading.gif');" width="3396" height="2347" />

JS

var I = new Image();
I.onload = function () {
    document.getElementById('big_image').src = I.src;
};
I.src = 'http://apod.nasa.gov/apod/image/0911/ngc2623_hst_big.jpg';