【lazysizes.js】pictureタグもiframeも遅延読み込みができるlazysizes

お久しぶりです。久しぶりすぎました。

imgタグだけでなくpictureタグやiframeも遅延読み込みできるlazysizes.jsの備忘録。

目次

（1）jsファイルダウンロード

（2）jsを読み込む

（3）該当箇所にクラス付与 & data-*に書き換え

（1）jsファイルダウンロード

lazysizes

使うファイル

lazysizes.min.js

（2）jsを読み込む

<script src="lazysizes.min.js"></script>

（3）該当箇所にクラス付与 & data-*に書き換え

imgタグの場合

<img data-src="test.png" class="lazyload">

pictureタグの場合

<picture>
<source data-srcset="test.png" media="(max-width: 768px)" />
<img data-src="test.png" class="lazyload"/>
</picture>

iframeの場合

<iframe data-src="URL" class="lazyload" ></iframe>

他にも背景画像を遅延読み込みしたりも可能なようです。
ブラウザ標準でのlazyload機能は進んでいるようですが、全てのブラウザが対応されているわけではなく、仕事ではまだ使いづらいためこのjsを使わせてもらっています。

現時点では、このlazysizes.jsがいろんなタグに対応してくれるので、一番使いやすいです。

最後に

2020年…..もう終わり？