Lazy Load Plugin for jQueryをバージョンアップ前と比べてみる

サイトのページ読み込み高速化のひとつとして、画像の読み込みを後読みにするjavascriptを検討してみた。

jQueryのプラグインで『Lazy Load Plugin for jQuery』というのがあるみたい。
画面のスクロールにあわせて画像を読み込むらしくページを開いた時の読み込むリクエストを減らせるらしい。

いろいろなブログでみたところ、昔のバージョンといまのものでは違うらしい。
昔のバージョンでは思ったような挙動にはならないらしい。

スクロールするまで画像を読み込まない（はずの）Lazy Loadについて※リンク切れ

新しいブラウザだとこのスクリプトを実装してもページを開いた時にすべての画像を読み込んでしまうので意味が無いらしい。プラス、スクロールしたあとでもリクエストが発生するようなことも。

ただ新しいバージョンだとそこのところに対応してバージョンアップしているとのこと。

画面スクロールに合わせてコンテンツを読み込む「jquery.lazyload.js」について。

試しに以前のものとバージョンアップ後のものを設置してみた。

クロームで読み込みのリクエストを確認

◯バージョンアップ以前のもの（キャッシュのある状態）

↑スクロールしていない状態ですべての画像を読み込んでいる。

◯バージョンアップ後のもの（キャッシュのある状態）

↑画面に表示されている画像のみ読み込んでいる。

たしかに以前のものはページを開いた時にリクエストされているようです。
あたらしくなった方は大丈夫っぽい。

いろいろなブログでも書かれていますがページの軽量化という意味では微妙なのかもですが、
ポンパレやギガジン、ジョブセンスなんかでも現在採用していますね。
ただオプションのフェードインを使うとふわっとする感じで画像が表示されるのはアイキャッチとして目をひきますよね。
単純に気持ちいいというのが一番かも

実装方法

jQueryとLazy Loadプラグインを公式サイトからダウンロード。
そして以下をheadタグ内に記述。

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.lazyload.min.js"></script>
<script type="text/javascript">
$(function() {
	$("img.lazy").lazyload({
	});
});
</script>

適用させたい画像のimgタグのsrc属性にダミー画像のパスを、data-original属性を追記してここに表示させる画像のパスを記述。

<img src="ダミー画像のパス" data-original="画像のパス" alt="..." />

以上で完了。