レイジーロードについて

レイジーロードの用途

ネットワーク環境や各プラットホームによっては画像読み込みが遅く
表示が歯抜けになったり、全部のページ情報が表示されるのに時間がかかったりする。
画面スクロールに合わせ、画像を初めから遅延読み込みで表示させることにより、上記の欠点を補う技術のこと。

デメリット

スクルール時にロードされるため、無駄な通信や表示処理を回避できる反面
スクロールしないとロードされないので、SEOには向かない。
※GoogleBotはスクロールしないため。

プラグイン以外のレイジーロード

Chrome75にはネイティブにレイジーロードの機能が組まれている。
なのでChromeでレイジーロードのプラグインを読み込む必要はないのだが
あくまでChromeのみの話なので、まだまだレイジーロードの需要はあるといえる。

JSのライブラリを読み込む


<script type='text/javascript' src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type='text/javascript' src="./jquery.lazyload.js"></script>

レイジーロードの設定例


$(function(){
	$( "img.lazy" ).lazyload(
    	{
    		threshold: 300,		// 300pxの距離まで近づいたら表示する
    		effect: "fadeIn",	// じわじわっと表示させる
    		effect_speed: 1000,	// 1秒かけて表示させる
    	}
	);
});

レイジーロードのイメージ設定


<img class="lazy" data-original="./images/1.png" />

レイジーロード使用例