Webサイトの表示速度を上げられるよう、スクロールをしたタイミングで画像を読み込む「画像の遅延表示」ができるJavaScriptはいくつかあると思います。私も試したことはありますが、画像がパッと出てきて画面がガタついたり、jQueryをいじらないとカスタムしにくかったりと、思った通りの動きをせず悩んでいました。
そんななか見つけた「lazysizes.js」は、「JavaScriptの読み込み」と「クラスの追加」だけで遅延表示ができ、簡単なcssの追記でフェードインでの表示もおこなうことができます。しかも背景画像の遅延表示も可能です！
ある案件でGoogleのページ読み込み速度を評価するPageSpeed Insightsにて赤点（Low）だったのですが、導入後見事に脱却しました。
目次
デモページ
画像についているクラス「lazyload」が「lazyloaded」に変わると遅延表示されています。
見ただけではわかりにくいので、検証ツールなどをつかってみてください。
公式サイトのデモページもあります。
http://afarkas.github.io/lazysizes/#examples
画像の遅延表示「lazysizes.js」導入の流れ
１. ファイルを読み込む
GitHubからファイルをダウンロードし、HTMLファイルのhead内に「lazysizes.js」または「lazysizes.min.js」を読み込ませます。
https://github.com/aFarkas/lazysizes
1 2 3 | <script src="lazysizes.min.js"></script> |
２. クラスをつける
遅延させたいイメージを”data-src”で読み込み、“lazyload”というクラスをつけます。
1 2 3 | <img data-src="画像パス" class="lazyload"> |
読み込まれると、クラス名が”lazyload”から”lazyloaded”自動で変わります。
軽量化だけでしたらこれで終わりです。
３. フェードインで表示するようにアレンジ
フェードインで表示させたい場合、lazyloadのクラスに対してopacityをかけます。
以下では3秒にしています。
HTML
1 2 3 4 5 | <div class="box-fadein lazyload"> <img data-src="image.jpg" class="lazyload" /> </div> |
CSS
1 2 3 4 5 6 7 8 9 10 | .box-fadein img { opacity: 0; -webkit-transition: opacity 3s; transition: opacity 3s; } .box-fadein.lazyloaded img.lazyloaded { opacity: 1; } |
３-１. フェードインするタイミングの指定
data-expand属性を使えば、画像からの距離を指定してフェードインさせることも可能です。
例えば、写真がある領域に20px入ってから表示させたい場合、data-expand=”-20″と書きます。
1 2 3 4 5 | <div class="box-fadein lazyload" data-expand="-20"> <img data-src="画像パス" class=" lazyloaded" src="画像パス"> </div> |
レスポンシブ対応
画面の幅に応じて画像をだし分けることもできます。
これまでは、PC用とSP用の2種類をどちらも読み込ませて、画面幅によって表示と非表示を分けていた方いるかと思います。ですが、lazysizes.jsでは画面幅に沿った画像のみ読み込まれるため、より効率的にWebページを表示できるのではないでしょうか。
例として、横幅が500px以下のときは「500.png」、700px以下のときは「700.png」、900pxから「900px」が表示されるようにしています。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <div class="box" data-expand="-20"> <picture> <!--[if IE 9]><video style="display: none"><![endif]--> <source data-srcset="img/500.png" media="(max-width: 500px)" /> <source data-srcset="img/700.png" media="(max-width: 700px)" /> <source data-srcset="img/900.png" /> <!--[if IE 9]></video><![endif]--> <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="900.png" class="lazyload" alt="image with artdirection" /> </picture> </div> |
背景画像の遅延
もし、背景画像を遅延表示させたい場合は、
「plugins」>「unveilhooks」内にあるファイル「ls.unveilhooks.js」を読み込み、”data-bg”という属性をつけます。
1 2 3 4 5 | <div class="box box-back lazyload" data-bg="画像パス"> <コンテンツ> </div> |
iframeにも対応可
YouTubeなどのiframeにも“lazyload”というクラスをつけるだけです。
1 2 3 | <iframe class="lazyload" data-src="YouTube embedタグ"></iframe> |
■参考サイト
lazySizes
