Image1つのページにさまざまなサイズを多数表示する必要があります。
<div id="box1">
<span>Something About Image Goes Here</span>
<img src="img1.jpg" id="img1" />
</div>
<div id="box2">
<span>Something About Image Goes Here</span>
<img src="img2.jpg" id="img2" />
</div>
---
---
<div id="box30">
<span>Something About Image Goes Here</span>
<img src="img30.jpg" id="img30" />
</div>
このようなコードを使用すると、ページが完全にロードされるまでに時間がかかるため、すべての画像を一度にロードするのではなくImages within viewport(Web ページの表示部分) を最初にロードし、ユーザーがスクロールしたときに残りをロードする必要があります。
（コードで使用した画像情報）には必要
ないことに注意してください。テキストはすぐに正常に表示されるはずです。
Facebookのように、ユーザーが下にスクロールすると新しいコンテンツが読み込まれますが、ここでは画像のみが必要です。装飾を使用しており、ユーザーが下にスクロールすると、対応する画像がそのdivに表示される必要があります。（写真が完全に読み込まれるまで、読み込み中の画像も追加したい）textdiv