指定した画像の読み込みを保留しておき、表示領域に入ってから読み込み動作を行う。
大量の画像が配置されているページで初期読み込み時間の短縮に有効。onscrollに設定して使用する。
指定画像が「display: none」などの理由で表示されていない場合にはその画像の処理は行わない。
<img>自身は表示状態でも、親Nodeが「display: none」なら表示されていないので理解して使うこと。
まず、ページ下部までスクロールして対象画像が表示されていないことを確認。
この位置に戻って、<body>のonscrollに$imgDefer()を設定してから、再度スクロールして動作確認をする。
HTML :
<body onscroll="$imgDefer()">
<img class="imgDefer" defer="images/pht_1.jpg" src="images/null.png" alt="花の写真">
<picture>
<source media="(min-width: 575px)" class="imgDefer" defer="images/pht_3.jpg" srcset="images/null.png">
<img class="imgDefer" defer="images/pht_4.jpg" src="images/null.png" alt="写真">
</picture>