少しずつ暖かい日も増え、外にも出たい気分になりますが、
その気持ちをぐっとおさえ、引きこもりをしています、はたやまです。
先日、画像の遅延読み込みについて改めて調べなければと感じることがありました。
今回は、画像の遅延読み込みについて自分の覚書きという意味もこめて
このブログを進めていきたいと思います。
1.画像の遅延読み込み
WEBサイトを表示させる際、通常は画像をすべてダウンロードしてから画像が表示されます。
まだ表示されていない、下部の画像も含めてすべて画像を読み込んでしまいます。
そこで、これを改善するのが「画像の遅延読み込み」です。
画像の遅延読み込みは、ブラウザ画面スクロールして表示領域にはいった画像を読み込んでいく仕組みのことです。
必要な分だけ画像を読み込むので無駄な読み込みが発生せずにページを軽くし、効率化できます。
2.画像遅延の実装
1）scriptタグを記述
lazysizes.min.jsを読み込むscriptタグを記載します。
<script src="lazysizes.min.js"></script>
2-1）imgタグを記述
遅延読み込みを実行する画像の<img>タグのclassに"lazyload"、
src属性にはダミー画像を、data-src属性に表示させる画像のパスを指定します。
iframeの際も同様にdata-srcにはパスを指定します。
<img data-src="image.jpg" class="lazyload" /> <iframe class="lazyload" data-src="動画のURL"></iframe>
2-2）backgroundに指定した画像を遅延読み込み
CSSのbackgroundプロパティに背景画像を指定では、data-src属性やクラスは指定することができません。
backgroundプロパティで読み込んだ画像を遅延読み込みしたい場合は、ls.unveilhooks.min.jsというファイルを使用します。
unveilhooksプラグインを使用し、背景画像やscriptタグも遅延ロードできるようにします。
使い方は、imgタグと同じようにclass="lazyload"を指定し、data-bg属性にパスを指定します。
<div class="lazyload" data-bg="bg-img.jpg">
background以外のサンプルコードは下記URLを参考。
https://github.com/aFarkas/lazysizes/tree/gh-pages/plugins/unveilhooks
以上、画像の遅延読み込みでlazysizesを使用した場合の一例でした。
画像の遅延読み込みのライブラリはたくさんありますし、簡単に導入できるものが多いようです。
Google Chromeでは遅延読み込みができる機能が実装されています。
