jQueryを使用して画像の遅延読み込み（Lazy Loading）を実装することで、ページの読み込み速度を向上させ、ユーザー体験を向上させることができます。Lazy Loadingは、ユーザーが画像が表示される位置にスクロールするまで、画像を読み込まないようにする技術です。
目次
Lazy Loadingはページの高速化を行うことでかなり重要な施策です。
jQueryで画像の遅延読み込みを実装する手順
1. HTMLで画像のsrc属性を変更
遅延読み込み用に、画像のsrc属性をdata-srcに変更します。これにより、最初にページが読み込まれたときに画像は読み込まれず、スクロール時にsrc属性に値がセットされます。
<img class="lazy" data-src="path/to/image.jpg" alt="Lazy Load Image">2. jQueryでスクロール時に画像を読み込む
次に、jQueryを使用して、画像が画面に表示されるタイミングでdata-srcからsrcに値を設定します。
$(document).ready(function() {
// ウィンドウがスクロールするたびに実行される関数
$(window).on('scroll', function() {
// クラス名が "lazy" のすべての画像を対象
$('.lazy').each(function(){
// ウィンドウ内に画像が表示されたかどうかをチェック
if ($(this).offset().top < $(window).scrollTop() + $(window).height()) {
// data-srcの値をsrcにセット
$(this).attr('src', $(this).data('src'));
// 読み込みが終わったらクラスを削除（再読み込み防止）
$(this).removeClass('lazy');
}
});
});
});3. 画像のプレースホルダー
遅延読み込み時に、プレースホルダー画像を表示しておくと、ユーザー体験が向上します。src属性には低解像度の画像やプレースホルダー画像をセットしておきます。
<img class="lazy" src="path/to/placeholder.jpg" data-src="path/to/image.jpg" alt="Lazy Load Image">追加のポイント
Intersection Observer API: jQueryに加え、ブラウザのIntersection Observer APIを使用すると、より効率的にLazy Loadingを実装できます。特にモダンなブラウザでのパフォーマンスが向上します。
SEOへの影響: Lazy Loadingを使う場合は、検索エンジンがコンテンツを正しく認識できるように、適切に設定する必要があります。
jQueryを使った遅延読み込みは、特に画像が多いページで有効なテクニックで、ページの初期表示を速くするのに役立ちます。