画像の多いページでは読み込み時に負荷がかかるので、読み込み時はウィンドウ内にある画像のみロードし、それ以降の画像はスクロールして画像がウィンドウ内に入った時に、逐次ロードする方法を紹介します。
HTML
補足
- 本来表示させる画像を data-src 属性で指定します。
- src 属性には仮のファイルを指定します。仮のファイルは本来表示させる画像と同じ縦横比の透明 PNG ファイルです。サンプルでは spacer-4x3.png という 4px × 3px の透明 PNG ファイルを指定しています。
- 仮ファイルの画像により、本来表示される画像のエリアが確保され、背景に指定した読み込み中の画像（loader.gif）が、その中央に表示されます
jQuery
補足
- ロード・スクロール・リサイズ時に data-src 属性のついた img 要素を delayImage 関数で処理しています。
- delayImage 関数では、data-src 属性のついた img 要素に SHOW クラスがなく、かつ非表示状態でなければ data-src 属性の値を src 属性にセットして表示しています（フワッと表示させるため、fadeOut と fadeIn を使用）。そのあと、SHOW クラスを付加して、表示済みのフラグを付けています。
- 非表示状態のブロック要素内にある img 要素がロード時に処理されてしまうようなので、if 文内に && !$(this).is(':hidden') を付け加えています。
CSS
補足
- data-src 属性の付いた img 要素の背景画像として、読み込み中を示す loader.gif をセットしています。
- jQuery で処理されるまでは loader.gif 画像が透明 PNG ファイルの背景画像として見えます。処理後は本来表示される画像が前面に表示されるので見えなくなります。