IntersectionObserverを使ってlazyload-imageを書き直した - 1000ch.netIntersectionObserverを使ってlazyload-imageを書き直した 画像をスクロール同期でロードする<lazyload-image>というWeb Componentsの内部処理を、IntersectionObserverで書き直した。 可視領域に要素が入っているかどうかの判定 リライトする前までは、要素それぞれにscrollイベントのリスナを発行して、その中で画面内に要素が表れているかを判定していた。throttleしているとはいえ、それぞれのリスナで以下の処理を行っていたのでややパフォーマンスが気になっていた。 getBoundingClientRect()で要素の矩形を取得する document.documentElement.scrollTopとdocument.documentElement.clientHeightで画面の上下端を取得する 要素が可視領域と交
GitHub - aFarkas/lazysizes: High performance and SEO friendly lazy loader for images (responsive and normal), iframes and more, that detects any visibility changes triggered through user interaction, CSS or JavaScript without configuration.
