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

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

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

lazysizes.min.js

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

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

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

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

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

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

2020年…..もう終わり？

当事務所にご関心をお持ちいただきまして、ありがとうございます。
お仕事に関するご相談は下記よりお問い合わせください。

BLOG