スクロールイベント改善してみた

HTML, JavaScript

4月にシステム部に異動してきました、岡田です。

業務的には、HTMLやCSSなどのデザイン部分と、JSもちょこちょこと触っています。

今回は、パフォーマンス改善のために、色々遅延読み込みをやってみよう
ということで、IntersectionObserverを使ってみたので備忘録も兼ねてまとめてみました。

IntersectionObserverとは

特定の要素がViewPortに入っているかどうかと、その位置を取得できるAPIです。
スクロールイベントのように断続的に処理が行われるのではなく、
DOM要素が画面内に入った時と出た時のみにイベントを発生させることができます。

さらに、レスポンシブ時に要素の位置が変わっても、
その要素が画面内にあるかないかを見ているので、いちいち高さを再取得したりする必要が無くなります。

これだけでヘッダーをスクロールの途中で固定したり、ポップアップを出したりするのに使えることがわかりますが、
今回はいろんなサイトのパフォーマンス改善に繋がる、画像の遅延読み込みの例をご紹介します

使い方

画像の遅延読み込みをしたい場合は以下のようになります

  • HTML

data-srcという属性に画像のURLを置いているので、
ページ読み込み時に、リクエストは発生しません。

  • JavaScript

領域内に要素があるか否かを判定しているので、
それぞれで動作を変えたりして、面白い動きを作ったりするのも、
結構簡単にできそうです

また、callbackには以下のようなプロパティがあります

使ってみた感想

スクロールイベントは、スクロールのたびにイベントが発火してしまうため、
scroll junk(画面のカクつき)が起きてしまうこともあります。
そのため、パフォーマンスを改善するために、スクロールイベントの間引きをしたりする必要があって、めんどくさいです。

そしてIntersectionObserverでは、冒頭で述べた通り、
要素がViewPortに入ったか否かだけをみているので、イベントの発生頻度が大幅に減ります。
そのため、パフォーマンス改善にはもってこいになっています。

もしもスクロールで何かを実装しようとしている方がいらっしゃいましたら、
ぜひご参考にご利用ください。

IE11について

最後に大事なことですが
IntersectionObserverさんはIEに対応していません、、、、、、、、、、、
そのため、以下のpolyfillはお忘れなく、、、

この記事を書いた人

岡田暉
岡田暉
写真好きのおじさんに見える、2017年入社のひよっこです。
最近書いた記事

HTML, JavaScript