lazyloadの使い方をDemoを見て納得！！画像遅延読み込みでサイトの最適化。

サイズの大きな画像や多くの画像を掲載してるとサイトが表示されるまでに時間がかかり、ユーザーの離脱やSEOの評価が下がってしまいます。

この問題を解決してくれるのがjQueryのLazyloadです。

Lazy loadはサイトスクロールのタイミングで順次、画像を読み込み表示します。

ここでは代表的なLazy loadの使い方と設定をDemoを用いてご紹介していきます。

実装イメージ

サイトにLazy loadを実装するとこんなイメージで画像が読み込まれます。

Lazy loadの取得

以下のGitHubよりlazy loadを取得して下さい。

tuupola/jquery_lazyload

画面右下のDownLoad ZIPクリックすると

lazyload一式がダウンロードされます。

ダウンロードした圧縮ファイルを解凍するとたくさんのファイルがありますが基本的に使用するファイルはひとつのみです。

jquery_lazyload-master
➡ jquery.lazyload.js
<span style="background-color: #ffff00;">➡ jquery.lazyload.min.js</span>
➡ jquery.scrollstop.js
➡ jquery.scrollstop.min.js

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ダウンロード

Download jQuery | jQuery

GoogleのCDN

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

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に変更する。

<img　<span style="background-color: #ffff00;">class="lazy"　data-original="img/example.jpg"</span>  >

1	<img　<span style="background-color: #ffff00;">class="lazy"　data-original="img/example.jpg"</span> >

javascript

以下のコードをbodyの終了タグ前に追記する。読み込むjavascriptファイルのパスはそれぞれの環境に合わせて修正して下さい。

<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>

$("img.lazy").lazyload();

</script>

Demo basicを見る

fadein

スクロールするとフェードインで画像が表示される使い方です。

HTML

BASICと同じでimgタグにclass=”lazy”を追加し、src属性をdata-originalに変更します。

<img　<span style="background-color: #ffff00;">class="lazy"　data-original="img/example.jpg"</span>  >

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秒かけてじわっとフェードイン表示がされます。

<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>

$("img.lazy").lazyload({

<span style="background-color: #ffff00;">effect : "fadeIn",

effect_speed: 3000 , // 3秒かけて表示させる

</span>});

</script>

Demo fadeinを見る

TIMEOUT

スクロールすると5秒アウトで画像が読み込まれて表示される実装方法です。

HTML

BASICと同じでimgタグにclass=”lazy”を追加し、src属性をdata-originalに変更する。

<img　<span style="background-color: #ffff00;">class="lazy"　data-original="img/example.jpg"</span>  >

1	<img　<span style="background-color: #ffff00;">class="lazy"　data-original="img/example.jpg"</span> >

javascript

以下のコードをbodyの終了タグ前に追記する。読み込むjavascriptファイルのパスはそれぞれの環境に合わせて修正して下さい。

BASICとの違いはeventにsportyを指定し、タイムアウトのjavascriptコードが追加されています。

<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>

$(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>

Demo timeoutを見る

scrollstop

スクロールが停止したタイミングで画像が読み込まれる実装です。

HTML

BASICと同じです。

imgタグにclass=”lazy”を追加し、src属性をdata-originalに変更します。

<img　<span style="background-color: #ffff00;">class="lazy"　data-original="img/example.jpg"</span>  >

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が指定されていることです。

<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 />});

Demo scrollstopを見る

ローディング画像を追加する

画像が読み込まれる前に表示する画像を指定することができます。私はローディングGIFを設定しました。

<img　class="lazy"　data-original="img/example.jpg"  <span style="background-color: #ffff00;">src="img/gif-load.gif"</span>>

1	<img　class="lazy"　data-original="img/example.jpg" <span style="background-color: #ffff00;">src="img/gif-load.gif"</span>>

ローディングGIFは以下のサイトで作成しました。

Loader Generator

Lazy Loadが動かいない原因

画像が表示されない、アニメーションがされない原因について考えられるものを紹介します。

私もミスをして同様の現象が発生しました。

ファイルパスが間違っている

jquery.min.jsやjquery.lazyload.min.jsのファイルパスが間違っていると画像が表示されません。

<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

となります。

<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>

$("img.lazy").lazyload();

</script>

この順番が違うとlazy loadは動きません。

imgタグに指定の記述がされていない

imgタグにはlazyクラスとdata-originalを指定する必要があります。この記述がされていないとlazy loadの処理は対象の画像ファイルだと認識できません。

<img　<span style="background-color: #ffff00;">class="lazy"　data-original="img/example.jpg"</span>  >

1	<img　<span style="background-color: #ffff00;">class="lazy"　data-original="img/example.jpg"</span> >

Lazy Loadのオプション

Demoで紹介させて頂いた以外にもオプションがあるのでまとめておきます。

Threshold

画像を遅延読込する閾値。

以下の例ではスクリーンに表示される200px手前で画像の読み込みを開始します。

<script type="text/javascript" charset="utf-8">
$("img.lazy").lazyload({
 threshold : 200
});
</script>

$("img.lazy").lazyload({

threshold : 200

});

</script>

event

引数に設定された値によってイベントを発生させます。

引数:click

クリックされたタイミングで画像を読み込みます。

<script type="text/javascript" charset="utf-8">
$("img.lazy").lazyload({
 event : "click"
});
</script>

$("img.lazy").lazyload({

event : "click"

});

</script>

引数:mouseover

画像の上をマウスオーバーされたタイミング画像を読み込みます。

<script type="text/javascript" charset="utf-8">
$("img.lazy").lazyload({
 event : "mouseover"
});
</script>

$("img.lazy").lazyload({

event : "mouseover"

});

</script>

引数:sporty

指定タイムアウトで画像を読み込みます。

<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>

$(function() {

$("img.lazy").lazyload({

event : "sporty"

});

$(window).bind("load", function() {

var timeout = setTimeout(function() {

$("img.lazy").trigger("sporty")

}, 5000);

});

</script>

effect

画像がアニメーションで表示されます。

引数：show

デフォルト値。
スクロールしてスクリーンに画像の表示位置が来たタイミングで表示されます。

<script type="text/javascript" charset="utf-8">
$("img.lazy").lazyload({
 effect : "show"
});
</script>

$("img.lazy").lazyload({

effect : "show"

});

</script>

引数：fadeIn

フェードインしながら画像が表示されます。

<script type="text/javascript" charset="utf-8">
$("img.lazy").lazyload({
 effect : "fadeIn"
});
</script>

$("img.lazy").lazyload({

effect : "fadeIn"

});

</script>

effect_speed

エフェクトに時間を指定することができます。以下の例では3秒かけてフェードイン表示がされます。

<script type="text/javascript" charset="utf-8">
$("img.lazy").lazyload({
 effect : "fadeIn" ,
 effect_speed: 3000 ,
});
</script>

$("img.lazy").lazyload({

effect : "fadeIn" ,

effect_speed: 3000 ,

});

</script>

公式サイト

Lazy Load Plugin for jQuery

Lazy Loadの使い方

(Visited 7,711 times, 1 visits today)