画像の操作：

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

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

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

記述例

$bgImgDefer()
$bgImgDefer(50)
◆ 使用するNodeに2つの設定をする
❶ class="bgImgDefer"  
※この関数を適用するNodeを収集するためのclass
❷ defer="images/target.png"  
※独自属性「defer」に読み込む背景画像パスを指定

注意点

指定Nodeが「display: none」などの理由で表示されていない場合にはそのNodeの処理は行わない。

読み込んだ画像は、対象Nodeの「background-image」に設定されるので、それ以外の背景画像表示に影響するCSSプロパティは事前に記述しておく。(例) Nodeの縦横サイズや background-size など

動作サンプル

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

画像1枚目
画像2枚目
HTML : <body onscroll="$bgImgDefer()">   <div class="bgImgDefer" defer="images/pht_3.jpg"> <div class="bgImgDefer" defer="images/pht_4.jpg">
※上記のサンプルコードは主にPC表示用を想定している。スマホ用のコーディングでは別途調整が必要となる可能性がある。
※この関数の動作サンプルとして必須ではない装飾的なCSSコードなどは省略して提示している。