「画像の遅延読み込み」の背景画像版を紹介します。
HTML
補足
- 本来表示させる背景画像を data-bg 属性で指定します。
- src 属性には仮のファイルを指定します。仮のファイルは背景画像を表示させる領域と同じ縦横比の透明 PNG ファイルです。サンプルでは spacer-1x1.png という 1px × 1px の透明 PNG ファイルで、正方形の領域を指定しています。
- 仮ファイルの画像により、本来表示される画像の領域が確保され、背景に指定した読み込み中の画像（loader.gif）が、その中央に表示されます
- data-bg-size 属性の値に contain または cover を指定することで、背景画像の表示の仕方を指定できます。
jQuery
補足
- ロード・スクロール・リサイズ時に data-bg 属性のついた img 要素を delayBg 関数で処理しています。
- delayBg 関数では、data-bg 属性のついた img 要素に SHOW クラスがなく、かつ非表示状態でなければ data-bg 属性の値を background-image プロパティにセットして表示しています（フワッと表示させるため、fadeOut と fadeIn を使用）。そのあと、SHOW クラスを付加して、表示済みのフラグを付けています。
- 非表示状態のブロック要素内にある img 要素がロード時に処理されてしまうようなので、if 文内に && !$(this).is(':hidden') を付け加えています。
- data-bg-size 属性が指定されている場合は、その値を調べて、背景画像の表示方法を変更しています。
CSS
補足
- data-bg 属性の付いた img 要素の背景画像として、読み込み中を示す loader.gif をセットしています。
- jQuery で処理されるまでは loader.gif 画像が透明 PNG ファイルの背景画像として見えます。処理後は本来表示される背景画像が表示されるので見えなくなります。