fullPage.jsで画像や背景を遅延読み込みする方法

はじめに

遅延読み込みライブラリは、fullPage.js では機能しない場合があります。

その理由は、fullPage.jsが従来の方法で scroll イベントをトリガーしないためです。
代わりに、fullPage.jsはCSSトランジションまたはJavaScriptを使用してスクロールをシミュレートします。

fullPage.jsで遅延読み込みを行う方法

方法1: 簡単な方法

現在の遅延読み込み技術をfullPage.jsと組み合わせる最も簡単な方法は、fullPage.jsのオプションscrollBar:trueを使用することです。

これにより、fullPage.jsは他のページのようにスクロールバーを表示し、ライブラリが期待どおりに機能します。

方法2: fullPage.jsの遅延読み込みオプションを使用する

fullPage.jsはデフォルトで遅延読み込みオプションを提供しているため、ページに追加のスクリプトを追加する必要はありません。
実際、この方法は、水平スライドの遅延読み込みや拡張機能との完全な互換性など、特定のシナリオでより効果的に動作します。

背景画像や動画の遅延読み込み

この方法を選ぶ場合は、遅延読み込みオプションlazyLoadingを有効化し（デフォルトでは有効です）、画像ファイルのソースに通常のsrcではなくdata-src属性を使用します。以下はその例です：

<div class="section">
    <img data-src="image.png">

    <video>
	<source data-src="video.webm" type="video/webm" />
	<source data-src="video.mp4" type="video/mp4" />
    </video>
</div>

この場合、このセクションの画像と動画は、このセクションに到達したときにのみ読み込まれます。前のセクションを離れたタイミングで読み込みを開始するため、読み込み速度が向上します。

CSS背景の遅延読み込み

CSS背景を使用する場合、遅延読み込みを実現するにはCSSを修正する必要があります。

まず、新しいセクションに到達するたびに、例えばlazy-loadedというクラスを追加するように設定します。これにより、訪問したセクションはすべてこのクラスを持つようになります。訪問していないセクションにはクラスが追加されません。

new fullpage('#fullpage', {
    onLeave: function(origin, destination, direction) {
        destination.item.classList.add('lazy-loaded');
    }
});

次に、このクラスがセクションに追加された場合のみ画像を表示するような「条件付きCSS」を作成します：

.section1 {
   background-size: cover;
}

.section1.lazy-loaded {
    background: url(image.jpg);
}

もちろん、ページ読み込み時に表示される背景にはこの「条件」を適用する必要はありません。

遅延読み込みの最終例

背景の遅延読み込みを使用したCodePenの例を作成しました。

See the Pen lazyLoad - backgrounds - fullpage.js by Álvaro (@alvarotrigo) on CodePen.