#Intersection Observerとは
指定したDOM要素の交差点（Intersection）を監視するAPIです。
#Intersection Observerのメリット
従来、DOM要素の位置計算や監視は、scrollイベントを使用し、scrollTopやrectTopなどで行っていました。
しかし、以下のような問題点があります。
- Forced Synchronous Layoutが発生する（レイアウトの再計算、詳しくはこちら What forces layout / reflow）
- Scroll Jankの可能性
- そもそもの実装が面倒
Intersection Observerを使用することで、位置の監視をブラウザが行ってくれるため、パフォーマンスの改善につながります。
#サンプル
従来の手法とIntersection Observer APIを使った手法で、画像遅延読み込みのサンプルを実装しました。
##従来の手法
none_observer.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title></title>
<style>
.image {
width: 400px;
padding: 10px;
background: #efefef;
margin: 0 auto 20px auto;
}
.image img {
display: block;
}
</style>
</head>
<body>
<div class="image" data-image="image01.jpg">
<img src="" alt="" width="400" height="284">
</div>
<div class="image" data-image="image02.jpg">
<img src="" alt="" width="400" height="284">
</div>
<div class="image" data-image="image03.jpg">
<img src="" alt="" width="400" height="284">
</div>
<div class="image" data-image="image04.jpg">
<img src="" alt="" width="400" height="284">
</div>
<div class="image" data-image="image05.jpg">
<img src="" alt="" width="400" height="284">
</div>
<div class="image" data-image="image06.jpg">
<img src="" alt="" width="400" height="284">
</div>
<div class="image" data-image="image07.jpg">
<img src="" alt="" width="400" height="284">
</div>
<div class="image" data-image="image08.jpg">
<img src="" alt="" width="400" height="284">
</div>
<div class="image" data-image="image09.jpg">
<img src="" alt="" width="400" height="284">
</div>
<div class="image" data-image="image10.jpg">
<img src="" alt="" width="400" height="284">
</div>
<div class="image" data-image="image11.jpg">
<img src="" alt="" width="400" height="284">
</div>
<div class="image" data-image="image12.jpg">
<img src="" alt="" width="400" height="284">
</div>
<script>
(function() {
const ROOT_MARGIN = 200;
const images = document.querySelectorAll(".image");
// イベントの間引き
const throttle = (func, wait)=> {
let time = Date.now();
return ()=> {
if ((time + wait - Date.now()) < 0) {
func();
time = Date.now();
}
}
}
class LazyLoad {
constructor(image) {
this.isLoaded = false;
this.windowHeight = window.innerHeight;
this.image = image;
this.rect = this.image.getBoundingClientRect();
this.onScroll = this.onScroll.bind(this);
}
addImage() {
const imagePath = "img/" + this.image.getAttribute("data-image");
this.image.children[0].setAttribute("src", imagePath);
}
checkImageLoad() {
let point = this.rect.top - ROOT_MARGIN;
if(this.windowHeight > point) {
this.addImage();
this.isLoaded = true;
}
}
onScroll() {
if(this.isLoaded) return false;
this.rect = this.image.getBoundingClientRect(); //スクロールの度に画面全体の再レイアウトが発生
this.checkImageLoad();
}
addEventListener() {
window.addEventListener("scroll", throttle(this.onScroll, 100), {passive: true});
}
init() {
this.checkImageLoad();
this.addEventListener();
}
}
Array.from(images).map(image => {
const lazyLoad = new LazyLoad(image);
lazyLoad.init();
});
}());
</script>
</body>
</html>
scrollイベントで監視を行い、対象のDOMがviewportの中に入ったらcallbackを実行しています。scrollの度に位置を取得しているため、画面全体のレイアウト（リフロー）が発生しパフォーマンスに影響を与えます。
##Intersection Observerでの手法
html/cssは上記のソースコードと同じため、Javascript部分のみ記載します。
observer.js
(function() {
const ROOT_MARGIN = '200px 0px';
const images = document.querySelectorAll(".image");
const intersectionChanged = (entries) => {
for (let entry of entries) {
let scopeElm = entry.target;
let imagePath = "img/" + scopeElm.getAttribute("data-image");
if(entry.isIntersecting) {
scopeElm.children[0].setAttribute("src", imagePath);
}
}
}
class LazyLoad {
constructor(image) {
this.image = image;
}
init() {
let observer = new IntersectionObserver(intersectionChanged, {
root: null,
rootMargin : ROOT_MARGIN
});
observer.observe(this.image);
}
}
Array.from(images).map(image => {
let lazyLoad = new LazyLoad(image);
lazyLoad.init();
});
}());
従来の手法でいうscroll時の監視を、全てIntersectionObserverクラスが行ってくれます。
###解説
Intersection Observerにはいくつかのコールバック引数と、3つのオプションがあります。
####コールバック引数
observer_callback.js
const intersectionChanged = (entries) => {
for (let entry of entries) {
// 変更が起こったタイムスタンプ
console.log(entry.time);
// ルートのgetBoundingClientRect()
console.log(entry.rootBounds);
// ターゲットのgetBoundingClientRect()
console.log(entry.boundingClientRect);
// 交差領域のgetBoundingClientRect()
console.log(entry.intersectionRect);
// 交差している領域の割合
console.log(entry.intersectionRatio);
//交差しているかどうか
console.log(entry.isIntersecting);
// ターゲット
console.log(entry.target);
}
}
####オプション
observer_option.js
let observer = new IntersectionObserver(intersectionChanged, {
// 交差対象のDOMの指定。初期値はdocument（viewport）。
root: document.getElementbyid('target'),
// entry.intersectionRatioを呼び出すタイミングを指定できる（下記は10%ごとに呼び出す）
threshold: [0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1.0],
// viewportと交差する何px前に呼び出したい場合や交差後何px後に呼び出したい場合に指定（下記は交差前200pxの部分でコールバック）
rootMargin: "200px"
});
observer.observe(target);
対応ブラウザは相当限られるので使用の際はご注意ください。
（17/5/22現在、Chromeのみ、Node.jsのローカルサーバーで確認）
以下の記事を参考にさせていただきました。
Intersection Observer を用いた要素出現検出の最適化