遅延ロード

Lazy Loadは、ページ上の画像がビューポートの外にある間、ユーザーがスクロールするまで読み込みを遅延させます。

これにより、ページの読み込みが速くなり、スクロールのパフォーマンスが向上し、トラフィックも節約できます。

なお、遅延画像や要素は、スクロール可能な <div class="page-content"> の中になければ正しく動作しません。

使い方

画像の場合

画像に遅延ロードを使用するには、次のようにします。

画像のソースを src 属性ではなく、data-src 属性で指定します。
画像に lazy クラスを追加する

<div class="page-content">
  ...
  <img data-src="path/to/image.jpg" class="lazy" />
  ...
</div>

After lazy image successfully loaded, or in case of error loading the image file, the lazy class will be replaced with lazy-loaded class.

背景画像の場合

背景画像にもレイジーロードを使うことができますが、その場合は

要素の背景画像のソースを data-background に指定します。
要素に lazy クラスを追加します。

<div class="page-content">
  ...
  <div data-background="path/to/image.jpg" class="lazy">
      ...
  </div>
  ...
</div>

After lazy image successfully loaded, or in case of error loading the image file, the lazy class will be replaced with lazy-loaded class.

フェードイン効果を使う

画像の読み込み時にフェードイン効果を持たせたい場合は、画像/要素に lazy-fade-in クラスを追加します。

<div class="page-content">
  ...
  <img data-src="path/to/image.jpg" class="lazy lazy-fade-in" />
  <div data-background="path/to/image.jpg" class="lazy lazy-fade-in">
      ...
  </div>
  ...
</div>

レイジーロードアプリのパラメータ

遅延ロードに関連するパラメータを lazy パラメータに渡すことで、グローバルな app parameters を使って、デフォルトの遅延ロードの動作を制御することができます。

Parameter	Type	Default	Description
placeholder	string		Lazy load image placeholder imageがまだロードされていない間に表示するソースです。デフォルトでは、1x1 pxの画像が表示されます。
threshold	number	0	デフォルトでは、画面に表示されたときに画像が読み込まれます。デフォルトでは、画像は画面に表示されたときに読み込まれますが、より早く画像を読み込みたい場合は、このパラメータを使用します。50に設定すると、画像がビューポートに表示される50ピクセル前に画像が読み込まれます。
sequential	boolean	true	有効にすると、遅延画像は、ビューポートに表示されたときに1つずつ読み込まれます。
observer	boolean	true	有効にすると、Intersection Observerがブラウザでサポートされている場合、これを使用します。

例：

var app = new Framework7({
  lazy: {
    threshold: 50,
    sequential: false,
  },
});

レイジーロードアプリのメソッド

ページの初期化後(Ajaxリクエスト後など)に手動でレイジーロードイメージを追加した場合、レイジーロードは自動的に初期化されず、期待通りに動作しません。この場合、以下のメソッドを使用して手動で初期化する必要があります。

app.lazy.create(pageEl) - initialize lazy loading on page

pageEl - 遅延ロード画像を含むページのHTMLElementまたはstring（CSS Selector付き）。必要です。

また、後で破棄/無効化したい場合は

app.lazy.destroy(pageEl) - destroy/disable lazy loading on page

pageEl - 遅延読み込み画像を含むページのHTMLElementまたはstring（CSSセレクタ付き）。必須項目です。

遅延ロード画像や要素を強制的にロードさせたい場合は、以下の方法があります。

app.lazy.loadImage(imageEl, callback) - force to load lazy image

imageEl - HTMLElement または string (with CSS Selector) of lazy image or element (element with lazy class). 必須です。
callback - function - 画像ファイルが読み込まれたとき、またはファイルの読み込みに失敗したときに実行されるコールバック関数です。

遅延ロードのイベント

遅延ロードでは、遅延要素に対する以下のDOMイベントと、アプリのインスタンスに対するイベントが発生します。

DOMイベント

Event	Target	Description
lazy:load	Lazy Element<... class="lazy">	イベントは画像ファイルのロード開始時に発生します。
lazy:loaded	Lazy Element<... class="lazy">	画像ファイルの読み込みが完了した後にイベントが発生します。
lazy:error	Lazy Element<... class="lazy">	イベントは画像ファイルのロードに失敗した場合に発生します。

アプリ・インスタンスのイベント

遅延ロードはアプリのインスタンスにもイベントを発行します。

Event	Target	Arguments	Description
lazyLoad	app	lazyEl	イベントは画像ファイルのロード開始時に発生します。引数として遅延ロード用のHTML要素を受け取ります。
lazyLoaded	app	lazyEl	イベントは、画像ファイルのロードが成功した後に発生します。引数として、遅延読み込み用のHTML要素を受け取ります。
lazyError	app	lazyEl	イベントは、画像ファイルのロードがエラーになった場合に発生します。引数として、遅延読み込み用のHTML要素を受け取ります。

手動で遅延読み込みを行う

遅延画像/要素の lazy イベントをトリガーすることで、遅延ハンドラに遅延画像のチェックをさせることができます。これは、遅延要素を動的に追加し、ページをスクロールすることなく、遅延要素がロードされたかどうかをチェックしたい場合に便利です。例えば、以下のようになります。

$$('img.lazy').trigger('lazy');
$$('div.lazy').trigger('lazy');

Examples

<template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-bg"></div>
      <div class="navbar-inner">
        <div class="title">Lazy Load</div>
      </div>
    </div>
    <div class="page-content">
      <div class="block block-strong">
        <p>
          <img data-src="https://cdn.framework7.io/placeholder/nature-500x500-1.jpg" width="1500" height="1500"
            class="lazy lazy-fade-in demo-lazy" />
        </p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tempus viverra lectus sit amet lobortis.
          Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque faucibus
          consectetur mauris eget lobortis. Maecenas efficitur efficitur mauris ac vehicula. Sed ut lectus laoreet,
          semper nisi vel, maximus massa. Duis at lorem vitae sem auctor condimentum a at neque. Phasellus vel
          scelerisque dui. Morbi varius nibh eu finibus rutrum.</p>
        <p>
          <img data-src="https://cdn.framework7.io/placeholder/nature-500x500-2.jpg" width="1500" height="1500"
            class="lazy lazy-fade-in demo-lazy" />
        </p>
        <p>Aenean id congue orci. Aliquam gravida nulla nec sollicitudin consectetur. Donec iaculis ipsum in purus
          tincidunt sagittis quis vehicula sapien. Vestibulum quis consectetur nibh. Pellentesque vehicula ligula
          sit amet commodo malesuada. Proin eget dolor sodales, egestas sapien sed, consectetur ante. Vivamus
          imperdiet porttitor condimentum. Aliquam sit amet tellus quis mauris dapibus convallis eu in nulla.
          Aliquam erat volutpat.</p>
        <p>
          <img data-src="https://cdn.framework7.io/placeholder/nature-500x500-3.jpg" width="1500" height="1500"
            class="lazy lazy-fade-in demo-lazy" />
        </p>
        <p>Pellentesque aliquam maximus libero a tincidunt. Nunc rhoncus tellus ac congue commodo. Aenean malesuada
          ante sit amet erat efficitur vehicula ac id ipsum. Suspendisse sed purus vel nisl rhoncus feugiat et ut
          ante. Mauris vehicula ligula sed nisl vulputate, nec ullamcorper quam vehicula. Etiam eu turpis eget sem
          luctus rutrum at porta nulla. Ut posuere lorem et nisi faucibus molestie.</p>
        <p>
          <img data-src="https://cdn.framework7.io/placeholder/nature-500x500-4.jpg" width="1500" height="1500"
            class="lazy lazy-fade-in demo-lazy" />
        </p>
        <p>Duis ullamcorper velit id enim rutrum, vel venenatis lacus laoreet. Sed id bibendum ligula, sed congue
          erat. Maecenas rhoncus posuere lorem ac consectetur. Duis accumsan, urna id pharetra tincidunt, libero
          nibh tincidunt enim, vestibulum suscipit turpis neque nec ante.</p>
        <p>
          <img data-src="https://cdn.framework7.io/placeholder/nature-500x500-5.jpg" width="1500" height="1500"
            class="lazy lazy-fade-in demo-lazy" />
        </p>
        <p>Suspendisse potenti. Curabitur et neque ac ante dapibus mollis tempor eget ex. Vivamus porttitor faucibus
          dui. Nulla eleifend hendrerit cursus. Sed elit nulla, pulvinar vitae diam eget, consectetur efficitur
          orci. Vivamus vel pharetra sapien. Suspendisse tortor tortor, iaculis at ullamcorper sit amet, vestibulum
          vel arcu. Aenean sed eleifend sapien. Praesent at varius metus.</p>
        <p>
          <img data-src="https://cdn.framework7.io/placeholder/nature-500x500-6.jpg" width="1500" height="1500"
            class="lazy lazy-fade-in demo-lazy" />
        </p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent laoreet nisl eget neque blandit
          lobortis. Sed sagittis risus id vestibulum finibus. Cras vestibulum sem et massa hendrerit maximus.
          Vestibulum suscipit tristique iaculis. Nam vitae risus non eros auctor tincidunt quis vel nulla. Sed
          volutpat, libero ac blandit vehicula, est sem gravida lectus, sed imperdiet sapien risus ut neque.</p>
        <p>
          <img data-src="https://cdn.framework7.io/placeholder/nature-500x500-7.jpg" width="1500" height="1500"
            class="lazy lazy-fade-in demo-lazy" />
        </p>
        <p>Aenean id congue orci. Aliquam gravida nulla nec sollicitudin consectetur. Donec iaculis ipsum in purus
          tincidunt sagittis quis vehicula sapien. Vestibulum quis consectetur nibh. Pellentesque vehicula ligula
          sit amet commodo malesuada. Proin eget dolor sodales, egestas sapien sed, consectetur ante. Vivamus
          imperdiet porttitor condimentum. Aliquam sit amet tellus quis mauris dapibus convallis eu in nulla.
          Aliquam erat volutpat.</p>
        <p>
          <img data-src="https://cdn.framework7.io/placeholder/nature-500x500-8.jpg" width="1500" height="1500"
            class="lazy lazy-fade-in demo-lazy" />
        </p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tempus viverra lectus sit amet lobortis.
          Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque faucibus
          consectetur mauris eget lobortis. Maecenas efficitur efficitur mauris ac vehicula. Sed ut lectus laoreet,
          semper nisi vel, maximus massa. Duis at lorem vitae sem auctor condimentum a at neque. Phasellus vel
          scelerisque dui. Morbi varius nibh eu finibus rutrum.</p>
        <p>
          <img data-src="https://cdn.framework7.io/placeholder/people-500x500-1.jpg" width="1500" height="1500"
            class="lazy lazy-fade-in demo-lazy" />
        </p>
        <p>Pellentesque aliquam maximus libero a tincidunt. Nunc rhoncus tellus ac congue commodo. Aenean malesuada
          ante sit amet erat efficitur vehicula ac id ipsum. Suspendisse sed purus vel nisl rhoncus feugiat et ut
          ante. Mauris vehicula ligula sed nisl vulputate, nec ullamcorper quam vehicula. Etiam eu turpis eget sem
          luctus rutrum at porta nulla. Ut posuere lorem et nisi faucibus molestie.</p>
        <p>
          <img data-src="https://cdn.framework7.io/placeholder/nature-500x500-10.jpg" width="1500" height="1500"
            class="lazy lazy-fade-in demo-lazy" />
        </p>
        <p>Duis ullamcorper velit id enim rutrum, vel venenatis lacus laoreet. Sed id bibendum ligula, sed congue
          erat. Maecenas rhoncus posuere lorem ac consectetur. Duis accumsan, urna id pharetra tincidunt, libero
          nibh tincidunt enim, vestibulum suscipit turpis neque nec ante.</p>
        <p><b>Using as background image:</b></p>
        <div data-background="https://cdn.framework7.io/placeholder/people-500x500-10.jpg"
          class="lazy lazy-fade-in demo-lazy"></div>
        <p>Suspendisse potenti. Curabitur et neque ac ante dapibus mollis tempor eget ex. Vivamus porttitor faucibus
          dui. Nulla eleifend hendrerit cursus. Sed elit nulla, pulvinar vitae diam eget, consectetur efficitur
          orci. Vivamus vel pharetra sapien. Suspendisse tortor tortor, iaculis at ullamcorper sit amet, vestibulum
          vel arcu. Aenean sed eleifend sapien. Praesent at varius metus.</p>
      </div>
    </div>
  </div>
</template>
<style>
  img.demo-lazy {
    width: 100%;
    height: auto;
    display: block;
  }

  div.demo-lazy {
    background: #aaa;
    background-size: cover;
    height: 60vw;
  }
</style>