jQueryを利用して画像の遅延読み込みを行う

2014.09.24　Posted by Coding_team

Webプログラミング

こんにちは。ウェブラボ技術メモ第5回目です。

今回はjQueryプラグイン「Lazy Load」を使って画像の遅延読み込みを行ってみたいと思います。

こんな事はありませんか？

ページに画像が多くて読み込みが遅い…
少しでも表示速度を早くしたい…

表示の速さはサイトにとって大事です。ではなぜ表示が遅いとダメなのか？
以下に例を2つ示します。

1.GoogleがSEOに影響があると発表したから
2.ユーザーがアクセスした際に離脱原因になるから

他にも様々な影響がありますが、この2点だけを見ても表示速度は重要であると言えます。

そんな時に役立つのがこちらのプラグインです。実際にブラウザに画像を表示するまではロードしないという効率的な仕組みです。
Lazy Load

今回はjQueryのプラグインを使用しますのでjquery.jsも一緒に読み込ませます。

■HTML head内

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="jquery.lazyload.min.js"></script>
<script>
$(function() {
	$("img").lazyload({   //遅延ロードの対象となる要素を指定
		effect:"fadeIn",   //フィードイン効果
		effectspeed: 1500   //フィードインの速度をmsで設定できます。
	});
});
</script>

$(function() {

$("img").lazyload({ //遅延ロードの対象となる要素を指定

effect:"fadeIn", //フィードイン効果

effectspeed: 1500 //フィードインの速度をmsで設定できます。

});

</script>

HTMLは data-original に（オリジナルの）画像を指定し、src にダミー画像を指定します。
ダミー画像は1px のグレー塗りの画像などが良いかと思います。

■HTML

<img data-original="img/001.jpg" src="img/gray.gif" width="640" height="480">
<img data-original="img/002.jpg" src="img/gray.gif" width="640" height="480">
<img data-original="img/003.jpg" src="img/gray.gif" width="640" height="480">