さまざまな次元の画像があり、それらを遅延ロードしたいと考えています。例: (遅延ロードなし)
<img src='200x200.jpg' />
(遅延ロードあり)
<img class='lazy' src='16x16loading.gif' data-original='200x200.jpg' />
<script type='text/javascript'>$('img.lazy').lazyload();</script>
それらが正常に読み込まれる前に、読み込み中の gif をその場所に表示したいと考えています。ただし、画像の読み込みが完了する前に、その寸法を目的の寸法に落ち着かせたいと思っていますが、低解像度のgifはズームすると非常に醜くなるため、gifの寸法自体ではありません。
したがって、上記をポイントに変換します。
- 追加
width=200pxすると、回転するgifが非常に醜い大きなものに引き伸ばされます。 - そうしないと、200x200.jpg が読み込まれるまで、回転する gif が 16x16 の空白しか占有できなくなります。
- 16x16loading.gifを実際に 200x200.gif にすると(私自身の初心者の試みによると)、ファイルサイズが 1.7kb から 14.8kb に 770% 増加しました。
回転するローディング gif を元の寸法で表示する方法はありますか?