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

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

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

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

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

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

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

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

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

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

■HTML head内

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

■HTML

完成したデモはこちらです

いかがでしょうか？
ブラウザの表示領域内に入ると、画像が読み込まれるようになりました。
特に、画像が多いギャラリーページなどに設置してあげるのが良いかと思います。

以上、ウェブラボ技術メモでした。