画像の操作:

表示領域に入ってから画像を読み込む

指定した画像の読み込みを保留しておき、表示領域に入ってから読み込み動作を行う。
大量の画像が配置されているページで初期読み込み時間の短縮に有効。onscrollに設定して使用する。

Number
1度に処理する個数を制限 最大処理数を整数で指定 / 省略した場合は全数を処理
●必須引数 ●オプション引数(省略可能)

記述例

$imgDefer()
$imgDefer(50)
◆ 使用する<img>Node・<source>Nodeに3つの設定をする
❶ class="imgDefer"
※この関数を適用するNodeを収集するためのclass

❷ defer="images/target.png"
※独自属性「defer」に読み込む画像パスを指定

❸ src="images/null.gif"
※ロード時に使用する極小の透明画像 (ファイル名任意)

注意点

指定画像が「display: none」などの理由で表示されていない場合にはその画像の処理は行わない。
<img>自身は表示状態でも、親Nodeが「display: none」なら表示されていないので理解して使うこと。

動作サンプル

まず、ページ下部までスクロールして対象画像が表示されていないことを確認。
この位置に戻って、<body>のonscrollに$imgDefer()を設定してから、再度スクロールして動作確認をする。

画像1枚目
花の写真
画像2枚目
写真
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>
※上記のサンプルコードは主にPC表示用を想定している。スマホ用のコーディングでは別途調整が必要となる可能性がある。
※この関数の動作サンプルとして必須ではない装飾的なCSSコードなどは省略して提示している。