指定した背景画像の読み込みを保留しておき、表示領域に入ってから読み込み動作を行う。
大量の背景画像が配置されているページで初期読み込み時間の短縮に有効。onscrollに設定して使用する。
指定Nodeが「display: none」などの理由で表示されていない場合にはそのNodeの処理は行わない。
読み込んだ画像は、対象Nodeの「background-image」に設定されるので、それ以外の背景画像表示に影響するCSSプロパティは事前に記述しておく。(例) Nodeの縦横サイズや background-size など
まず、ページ下部までスクロールして対象背景画像が表示されていないことを確認。
この位置に戻って、<body>の onscroll に $bgImgDefer() を設定してから、再度スクロールして動作確認をする。
HTML :
<body onscroll="$bgImgDefer()">
<div class="bgImgDefer" defer="images/pht_3.jpg">
<div class="bgImgDefer" defer="images/pht_4.jpg">