スクロールすると画像がふわっと表示されるようなサイトを良く見ますよね。
あれは画像の遅延読み込みという事をしているそうです。
ページロード時にでは無く、スクロールで特定の位置に来た時に初めて画像を読み込んでいるようです。
ページロード時には画面に表示される画像以外を読み込んでいないため、ページの表示までの時間も高速になります。
オシャレさと実用性を兼ね備えた工夫ですね！
今回はこの「画像の遅延読み込み」が出来るプラグイン「lazyload.js」を使ってみましょう。
lazyload.jsの公式サイトはこちらです。
サンプルも作りましたので見てくださいね。
jQueryとlazyloadの読み込み
まずはjQueryとlazyloadを読み込みましょう。
CDNが用意されていますので、テストではこちらを使わせてもらいましょう。
|
1 2 |
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.js'></script> |
HTML側で画像を表示
画像が表示されるHTMLを作りましょう！
どんなものでもOKですが、スクロールが発生するように複数個の画像が縦に並ぶように作ると良いと思います。
|
1 2 3 4 5 6 7 |
<div class="row"> <div class="col"> <img class="lazy img-fluid" src="https://placehold.jp/ffffff/ffffff/600x400.png" data-original="http://clue-design.com/wp-content/uploads/2017/11/cat1.jpeg" /> </div> </div> |
imgタグを作る上で注意点が３つあります。
- 3行目：クラスに「lazy」を付加する（lazyという名前で無くてもOK）
- 4行目：「src」にはダミー画像へのパスを記述する
- 5行目：「data-original」に画像のパスを記述する
JS側に処理を記述
スクリプトに以下の処理を記述します。
|
1 2 3 4 5 6 |
$(function(){ $(".lazy").lazyload({ effect: "fadeIn", effectspeed: 1000 }); }); |
2行目にはHTMLでimgタグに付加したクラス名を記述します。
その他パラメーターの詳細については公式サイトを参照してくださいね。
たったこれだけで画像が遅延読み込みされるページを作成することができます！
サンプルも作っていますので色々と試してみてくださいね。
