2016/12/03
lazyloadの使い方をDemoを見て納得！！画像遅延読み込みでサイトの最適化。
サイズの大きな画像や多くの画像を掲載してるとサイトが表示されるまでに時間がかかり、ユーザーの離脱やSEOの評価が下がってしまいます。
この問題を解決してくれるのがjQueryのLazyloadです。
Lazy loadはサイトスクロールのタイミングで順次、画像を読み込み表示します。
ここでは代表的なLazy loadの使い方と設定をDemoを用いてご紹介していきます。
ページ内目次
実装イメージ
サイトにLazy loadを実装するとこんなイメージで画像が読み込まれます。
Lazy loadの取得
-
tuupola/jquery_lazyload
画面右下のDownLoad ZIPクリックすると
lazyload一式がダウンロードされます。
ダウンロードした圧縮ファイルを解凍するとたくさんのファイルがありますが基本的に使用するファイルはひとつのみです。
|
1 2 3 4 5 |
jquery_lazyload-master ➡ jquery.lazyload.js <span style="background-color: #ffff00;">➡ jquery.lazyload.min.js</span> ➡ jquery.scrollstop.js ➡ jquery.scrollstop.min.js |
jQueryが実装されていないサイトの場合、組み込む必要があります。以下のサイトからダウンロードする！？またはCDNでjQueryを読み込んでください。ダウンロードを行う場合にはDownload the compressed, production jQuery 2.X.Xの最新版をクリック。
jQuery 2.x.xダウンロード
GoogleのCDN
|
1 |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> |
Lazy loadの使い方
jquery.min.jsとjquery.lazyload.min.jsを読みこんでjavascriptでプログラムを記述し、画像の遅延読み込みを行わせるimgタグに指定classと属性を追記すると実装されます。
ここから具体的な実装方法を４つご紹介していきます。
BASIC
アニメーションのない根本的な実装方法です。
HTML
imgタグにclass=”lazy”を追加し、src属性をdata-originalに変更する。
|
1 |
<img <span style="background-color: #ffff00;">class="lazy" data-original="img/example.jpg"</span> > |
javascript
以下のコードをbodyの終了タグ前に追記する。読み込むjavascriptファイルのパスはそれぞれの環境に合わせて修正して下さい。
|
1 2 3 4 5 6 |
<script src="js/jquery.min.js"></script> <script src="js/jquery.lazyload.min.js"></script> <script type="text/javascript" charset="utf-8"> $("img.lazy").lazyload(); </script> |
fadein
スクロールするとフェードインで画像が表示される使い方です。
HTML
BASICと同じでimgタグにclass=”lazy”を追加し、src属性をdata-originalに変更します。
|
1 |
<img <span style="background-color: #ffff00;">class="lazy" data-original="img/example.jpg"</span> > |
javascript
以下のコードをbodyの終了タグ前に追記する。読み込むjavascriptファイルのパスはそれぞれの環境に合わせて修正して下さい。
BASICとの違いはeffectにfadeinを指定し、effect_speedに3秒(3000ms)を指定しました。
3秒かけてじわっとフェードイン表示がされます。
|
1 2 3 4 5 6 7 8 9 |
<script src="js/jquery.min.js"></script> <script src="js/jquery.lazyload.min.js"></script> <script type="text/javascript" charset="utf-8"> $("img.lazy").lazyload({ <span style="background-color: #ffff00;">effect : "fadeIn", effect_speed: 3000 , // 3秒かけて表示させる </span>}); </script> |
TIMEOUT
スクロールすると5秒アウトで画像が読み込まれて表示される実装方法です。
HTML
BASICと同じでimgタグにclass=”lazy”を追加し、src属性をdata-originalに変更する。
|
1 |
<img <span style="background-color: #ffff00;">class="lazy" data-original="img/example.jpg"</span> > |
javascript
以下のコードをbodyの終了タグ前に追記する。読み込むjavascriptファイルのパスはそれぞれの環境に合わせて修正して下さい。
BASICとの違いはeventにsportyを指定し、タイムアウトのjavascriptコードが追加されています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<script src="js/jquery.min.js"></script> <script src="js/jquery.lazyload.min.js"></script> <script type="text/javascript" charset="utf-8"> $(function() { $("img.lazy").lazyload({ <span style="background-color: #ffff00;">event : "sporty",</span> }); }); <span style="background-color: #ffff00;">$(window).bind("load", function() { var timeout = setTimeout(function() { $("img.lazy").trigger("sporty") }, 5000); });</span> </script> |
scrollstop
スクロールが停止したタイミングで画像が読み込まれる実装です。
HTML
BASICと同じです。
imgタグにclass=”lazy”を追加し、src属性をdata-originalに変更します。
|
1 |
<img <span style="background-color: #ffff00;">class="lazy" data-original="img/example.jpg"</span> > |
javascript
以下のコードをbodyの終了タグ前に追記する。読み込むjavascriptファイルのパスはそれぞれの環境に合わせて修正して下さい。
BASICとの違いはjquery.scrollstop.min.jsが新規で読み込まれているのとeventにscrollstopが指定されていることです。
|
1 |
<script src="js/jquery.min.js"></script><br /><script src="js/jquery.lazyload.min.js"></script><br /><span style="background-color: #ffff00;"><script src="js/jquery.scrollstop.min.js"></script></span><br /><br /><script type="text/javascript" charset="utf-8"><br />$(function() {<br /> $("img.lazy").lazyload({<br /> <span style="background-color: #ffff00;">event: "scrollstop</span>"<br /> });<br />}); |
ローディング画像を追加する
画像が読み込まれる前に表示する画像を指定することができます。私はローディングGIFを設定しました。
|
1 |
<img class="lazy" data-original="img/example.jpg" <span style="background-color: #ffff00;">src="img/gif-load.gif"</span>> |
ローディングGIFは以下のサイトで作成しました。
Lazy Loadが動かいない原因
画像が表示されない、アニメーションがされない原因について考えられるものを紹介します。
私もミスをして同様の現象が発生しました。
ファイルパスが間違っている
jquery.min.jsやjquery.lazyload.min.jsのファイルパスが間違っていると画像が表示されません。
|
1 2 3 |
<script src="<span style="background-color: #ffff00;">js/</span>jquery.min.js"></script> <script src="<span style="background-color: #ffff00;">js/</span>jquery.lazyload.min.js"></script> |
記述の順番が間違っている
htmlファイルに記述する順番は、
１．jquery.min.js
２．jquery.lazyload.min.js
３．javascript
となります。
|
1 2 3 4 5 6 |
<script src="js/jquery.min.js"></script> <script src="js/jquery.lazyload.min.js"></script> <script type="text/javascript" charset="utf-8"> $("img.lazy").lazyload(); </script> |
この順番が違うとlazy loadは動きません。
imgタグに指定の記述がされていない
imgタグにはlazyクラスとdata-originalを指定する必要があります。この記述がされていないとlazy loadの処理は対象の画像ファイルだと認識できません。
|
1 |
<img <span style="background-color: #ffff00;">class="lazy" data-original="img/example.jpg"</span> > |
Lazy Loadのオプション
Demoで紹介させて頂いた以外にもオプションがあるのでまとめておきます。
Threshold
画像を遅延読込する閾値。
以下の例ではスクリーンに表示される200px手前で画像の読み込みを開始します。
|
1 2 3 4 5 6 |
<script type="text/javascript" charset="utf-8"> $("img.lazy").lazyload({ threshold : 200 }); </script> |
event
引数に設定された値によってイベントを発生させます。
引数:click
クリックされたタイミングで画像を読み込みます。
|
1 2 3 4 5 6 |
<script type="text/javascript" charset="utf-8"> $("img.lazy").lazyload({ event : "click" }); </script> |
引数:mouseover
画像の上をマウスオーバーされたタイミング画像を読み込みます。
|
1 2 3 4 5 6 |
<script type="text/javascript" charset="utf-8"> $("img.lazy").lazyload({ event : "mouseover" }); </script> |
引数:sporty
指定タイムアウトで画像を読み込みます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<script type="text/javascript" charset="utf-8"> $(function() { $("img.lazy").lazyload({ event : "sporty" }); }); $(window).bind("load", function() { var timeout = setTimeout(function() { $("img.lazy").trigger("sporty") }, 5000); }); </script> |
effect
画像がアニメーションで表示されます。
引数：show
デフォルト値。
スクロールしてスクリーンに画像の表示位置が来たタイミングで表示されます。
|
1 2 3 4 5 6 |
<script type="text/javascript" charset="utf-8"> $("img.lazy").lazyload({ effect : "show" }); </script> |
引数：fadeIn
フェードインしながら画像が表示されます。
|
1 2 3 4 5 6 |
<script type="text/javascript" charset="utf-8"> $("img.lazy").lazyload({ effect : "fadeIn" }); </script> |
effect_speed
エフェクトに時間を指定することができます。以下の例では3秒かけてフェードイン表示がされます。
|
1 2 3 4 5 6 7 |
<script type="text/javascript" charset="utf-8"> $("img.lazy").lazyload({ effect : "fadeIn" , effect_speed: 3000 , }); </script> |
公式サイト
-
Lazy Load Plugin for jQuery
Lazy Loadの使い方
