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

Post on:2019年7月4日

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をインストールします。

$ npm install bounds.js --save

1	$ npm install bounds.js --save

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

import Bound from 'bounds.js'

1	import Bound from 'bounds.js'

使い方

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

const boundary = Bound()

1	const boundary = Bound()

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

const image = document.querySelector('img')
const whenImageEnters = (ratio) => {}
const whenImageLeaves = (ratio) => {}

boundary.watch(image, whenImageEnters, whenImageLeaves)

const image = document.querySelector('img')

const whenImageEnters = (ratio) => {}

const whenImageLeaves = (ratio) => {}

boundary.watch(image, whenImageEnters, whenImageLeaves)

オプション

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

{
  root: window,       // the top-level document's viewport
  margins: {
    top: 0,
    right: 0,
    bottom: 0,
    left: 0
  },
  threshold: 0.0,
  onEmit: () => {}    // no-op
}

{

root: window, // the top-level document's viewport

margins: {

top: 0,

right: 0,

bottom: 0,

left: 0

threshold: 0.0,

onEmit: () => {} // no-op

}

root

rootは境界を作成する要素で、監視対象要素がroot要素に出入りするたびにイベントが発生します。
margins

rootの境界領域を定義する際に上・右・下・左のmarginを定義できます。root要素のスタイルではありません。
threshold

コールバックが行われる前に必要とされる交差領域の閾値。0.0は監視対象要素が1pxでも境界内に入るとコールバックが実行され、1.0はすべてが境界内に入ると実行されます。
onEmit

実行されたコールバックは、コールバックが実行された後に、監視対象要素が境界内に出入りするたびに実行されます。境界内に出入りするかに関係なく、何らかのアクションを起こしたい場合に便利なオプションです。