遅延読み込みの方法を見直してみる

こんにちは、ウェブラボクリエイターズメモです。

過去に「jQueryを利用して画像の遅延読み込みを行う」という記事を書きましたが、今一度遅延読み込みの方法を見直してみたいと思います。

この方法では、スクロールするたびに位置を計算して画像の表示を判断しており、正直あまり良い処理とは言えないものでした。

ですが、今のトレンドはIntersection Observer API（交差監視 API）を利用した方法でGoogleも推奨しており、主要なブラウザではほぼサポートされています。

＞ Google developers
＞ 対応ブラウザ（Can I use）

Intersection Observer APIとは、その名の通り要素同士の交点などを検出することができるAPIです。ウィンドウと画像の交点を検出できるので遅延読み込みに役立ちます。

今回は、Google developersでも紹介されているライブラリ「lozad.js」を使用して画像の遅延読み込みのDEMOを作成します。

＞ 「lozad.js」配布元

では実装する際、記述が必要な箇所の説明をしていきたいと思います。

■HTML

遅延読み込みしたいimgタグにクラス「lozad」を付与し、src属性にダミー画像などを、data-src属性に表示したい画像を指定します。

■script部分

配布元からダウンロードしてきたライブラリを読み込み、2行ほど記述を書くだけです。

＞ 作成したDEMOはこちら

ブラウザのコンソールでスクロールしながらimgタグを見てみると要素がウィンドウに入ったときに画像が表示されているのが確認できると思います。

単純な画像の遅延読み込みならこれだけで実装でるので初心者でも簡単にできますね。

配布元で様々な使い方も説明しているので興味がある方は見てみると役立つ機会は多いと思います。もちろんimgタグだけでなくvideoタグやiframeタグにも使えますのでご安心を。。。

もうjQueryなどを利用した方法は必要有りませんね。今後はIntersection Observer APIを活用していきましょう！

以上、クリエイターズメモでした。