WEB NOTE
WEB関連の備忘録

画像の遅延読み込みを簡単に実装できるIE対応の超軽量ライブラリ「LazyIMG.js」

Javascript

SEOにも強い、脱jQueryの画像の遅延読み込みをしてくれるライブラリ、「LazyIMG.js」の紹介です。
このライブラリの特徴はGoogle先生推奨の「 IntersectionObserver 」で構築されていること、実装がとても簡単なこと、そして超軽いことです。
サイト制作にぜひ役立ててみてください。

LazyIMG.jsの使い方

こちらのページからJavascriptファイルをダウンロードします。

bodyタグ直下にスクリプトを読み込みます。

<script src="js/lazyimg.js"></script>

あとは src属性を data-src に置き換え、クラス名に .lazyimg を追加するだけです。

<img data-src="img/xxx.jpg" class="lazyimg">
<img data-src="img/xxx.webp" class="lazyimg">

次世代フォーマットにも対応しています。記述のやり方は特に変わりませんが、非対応のブラウザのことも考えて pictureタグを使うことをおすすめします。
pictureタグでの使い方は以下の通りです。

<picture class="lazyimg">
  <source data-src="img/xxx.webp" type="image/webp">
  <img data-src="img/xxx.jpg" alt="test">
</picture>

pictureタグにクラス名 .lazyimg、sourceタグ、imgタグにそれぞれdata-srcを記述するだけです。

background-image にも対応しています。
記述の仕方は、imgタグ、pictureタグ以外のタグに、data-srcとクラス名.lazyimg を書くだけです。

<div class="lazyimg" data-src="img/xxx.jpg"></div>

iframeに対応させる

YouTube や GoogleMAP などを埋め込むときにiframeをよく使います。
対応方法は画像を対応させる方法と変わりありません。

<iframe class="lazyimg" data-src="https://xxx.com"></iframe>

CSSで background-image に対応させる

WebPをCSSで対応させるときなどに使います。
このJSは data-src を付与していない要素に対して class名 -active を付与してくれます。
対応方法は以下の通りです。

<div class="img lazyimg"></div>
.img {
  width: 100px;
  height: 100px;
  background: no-repeat center center / contain;
}

.img.-active {
  background-image: url(xxx.jpg);
}

ajaxで読み込んだ画像にも対応させる

lazyimgを再度呼び出せば対応することができます。

lazyimg();

IEへの対応方法

残念ながらIntersection Observerは対応していません。なのであきらめてください。IE滅んでください。
対応させるためにポリフィルを読み込みます。

<script src="https://polyfill.io/v2/polyfill.min.js?features=IntersectionObserver"></script>

PICK UP