Index | blog.jxck.io
Archive 2024 2024-11-01 Dialog と Popover #11 2024-10-22 Dialog と Popover #10 2024-10-16 Dialog と Popover #9 2024-10-11 Dialog と Popover #8 2024-10-10 Dialog と Popover #7 2024-10-03 Dialog と Popover #6 2024-10-02 Dialog と Popover #5 2024-09-30 Dialog と Popover #4 2024-09-27 Dialog と Popover #3 2024-09-26 Dialog と Popover #2 2024-09-25 Dialog と Popover #1 2024-09-09 Web Developer Conference 2024 開催後
Intersection Observer を用いた要素出現検出の最適化 | blog.jxck.io
Intro スクロールによる DOM 要素の出現などを効率よく検知するため、新しく Intersection Observer という API が追加された。 この API の使い方と、本サイトへの適用について記す。 要素交差(intersection)の検出 ページをスクロールしていく過程で、特定の DOM が画面に出現したことをフックしたいケースがある。 代表例は 画像の遅延読み込み であり、初期ロードでは画像の取得を行わずスクロールしていく過程で順次取得する手法である。 特に画像の多いページでは表示に必要なリソース取得のみに最適化でき、初期画面表示などでは効果が大きいとされる。 これを実装するのに必要なのは、「 <img> 要素が出現しているかどうか」であるが、本質的には「画面外にあった <img> が viewport と交差したか」を取得することになる。 つまり、 要素出現の取得
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
