遅延読み込み、無限スクロールなど、要素と境界の交差を非同期で検出する1Kbの超軽量スクリプト -Bounds.js

画像の遅延読み込みや無限スクロールを実装する際、ページ上に境界を定義し、その境界に要素が入ったかどうか判定して実行します。要素と境界の交差を非同期に検出し、パフォーマンスを改善する1Kbの軽量スクリプトを紹介します。

要素が境界に1px交差した、全部が入ったなどを正確に検出。他のJavaScriptへの依存はなく、単体で動作します。

サイトのキャプチャ

Bounds.js -GitHub

Bounds.jsの特徴

画像の遅延読み込み、無限スクロールなどの実装には、境界を設定することが重要です。通常は、イベントハンドラ、ループ、getBoundingClientRectの呼び出しの組み合わせが必要でしたが、これらはメインスレッドで実行されるため、パフォーマンスが低下します。Bounds.jsは要素と境界の交差を非同期に検出し、パフォーマンスを改善します。

サポートブラウザ

Bounds.jsはブラウザのAPI「IntersectionObserver」に依存しているため、サポートブラウザは下記の通り。

  • Chrome 51+
  • Firefox 55+
  • Safari 12.1+
  • Edge 15+
  • iOS Safari 12.2+
  • Chrome for Android 51+
  • Opera - Supported
  • IE - No Support

IntersectionObserverをサポートしていないブラウザの場合は、polyfillを利用してください。

Bounds.jsのデモ

デモでは非同期で境界を検出する様子が楽しめます。

サイトのキャプチャ

デモページ: 基本

サイトのキャプチャ

デモページ: 遅延読み込み

Bounds.jsの使い方

Bounds.jsはJavaScriptの最新のワークフローを念頭に置いて開発されています。

インストール

npmを使用して、bounds.jsをインストールします。

インストール後にインポートし、好きな名前を付けます。

使い方

新しいboundaryを作成し、オプションを定義します。

次に、監視する要素を定義します。

オプション

デフォルトのオプションと値です。

  • root
    rootは境界を作成する要素で、監視対象要素がroot要素に出入りするたびにイベントが発生します。
  • margins
    rootの境界領域を定義する際に上・右・下・左のmarginを定義できます。root要素のスタイルではありません。
  • threshold
    コールバックが行われる前に必要とされる交差領域の閾値。0.0は監視対象要素が1pxでも境界内に入るとコールバックが実行され、1.0はすべてが境界内に入ると実行されます。
  • onEmit
    実行されたコールバックは、コールバックが実行された後に、監視対象要素が境界内に出入りするたびに実行されます。境界内に出入りするかに関係なく、何らかのアクションを起こしたい場合に便利なオプションです。

sponsors

top of page

©2019 coliss