jQueryの遅延読み込みプラグインであるjquery.lazyload.jsの使い方の例

jQueryの遅延読み込みプラグインjquery.lazyload.jsは、画像の遅延読み込みを行うプラグインです。ページが特定位置までスクロールされると、画像を読み込みます。これにより、ページの読み込み速度とユーザーエクスペリエンスが向上します。以下は使用例です。

最初に、HTMLページ内にjQueryライブラリとjquery.lazyload.jsプラグインのソースファイルを読み込んでください。

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="jquery.lazyload.js"></script>

その後、遅延読み込みが必要な画像に”lazyload”クラスと”data-src”属性を追加し、”data-src”属性に本物の画像のアドレスを指定します。

<img class="lazyload" data-src="image.jpg" alt="Image">

jQueryのreadyメソッドを使用して、遅延読み込みプラグインを初期化します。

$(document).ready(function() {
  $("img.lazyload").lazyload();
});

画像が読み込まれる前に表示されるように、最後にCSSでデフォルトのプレースホルダーを設定します。

.lazyload {
  background: url(placeholder.jpg) no-repeat center center;
}

ページが画像の場所までスクロールされると、プラグインが画像を自動的に読み込んでプレースホルダーを置き換えます。

重要な点は、遅延読み込みプラグインには追加の設定項目があり、必要に応じて設定できることです。例えば、threshold（閾値）を設定することで画像の読み込みをどの程度事前に制御できます。

$("img.lazyload").lazyload({
  threshold: 200 // 提前200像素加载图片
});

また、プラグインにはいくつかのイベントコールバック関数が提供されており、カスタム操作を実行するためにロード前、ロード中、ロード後に使用できます。詳細な設定および使用方法については、jquery.lazyload.jsの公式ドキュメントを参照してください。