年齢なんか関係ない! 人生史上今が一番! Webのパフォーマンスもブチ上げていきたい、フロントエンドエンジニアのザワです。 lazyload(レイジーロード)、Web業界では耳慣れたワードになってきたのではないでしょうか。 Webページの表示を高速化するために、ページロード初期時には画像は読み込まず、表示したいタイミングでロードを開始するアレです。「lazyload」だの「遅延読み込み」だのいってますが同じことを指しています。気分と話し相手によって変えていきましょう。 今回は2つの方法を2回に分けて実践していきます。 Intersection observerを使用する方法 loading属性にlazyを適用する方法 Intersection observerが一般的になる以前は、scrollイベントで随時要素の位置を取得して、みたいなことをやっていたと思いますが、そんなオールドスクールな
![画像を遅延読み込みしてみよう!Intersection Observer編 | 株式会社LIG(リグ)|DX支援・システム開発・Web制作](https://cdn-ak-scissors.b.st-hatena.com/image/square/ee3b79b78c41a31facce5f804cfbde56ea622d6f/height=288;version=1;width=512/https%3A%2F%2Fliginc.co.jp%2Fwp-content%2Fuploads%2F2019%2F12%2F200115_lazyload_SNS.png)