jQueryを利用して画像の遅延読み込みを行う
2014.09.24 Posted by Coding_team
こんにちは。ウェブラボ技術メモ第5回目です。
今回はjQueryプラグイン「Lazy Load」を使って画像の遅延読み込みを行ってみたいと思います。
こんな事はありませんか?
ページに画像が多くて読み込みが遅い…
少しでも表示速度を早くしたい…
表示の速さはサイトにとって大事です。ではなぜ表示が遅いとダメなのか?
以下に例を2つ示します。
1.GoogleがSEOに影響があると発表したから
2.ユーザーがアクセスした際に離脱原因になるから
他にも様々な影響がありますが、この2点だけを見ても表示速度は重要であると言えます。
そんな時に役立つのがこちらのプラグインです。実際にブラウザに画像を表示するまではロードしないという効率的な仕組みです。
Lazy Load
今回はjQueryのプラグインを使用しますのでjquery.jsも一緒に読み込ませます。
■HTML head内
HTMLは data-original に(オリジナルの)画像を指定し、src にダミー画像を指定します。
ダミー画像は1px のグレー塗りの画像などが良いかと思います。
■HTML
いかがでしょうか?
ブラウザの表示領域内に入ると、画像が読み込まれるようになりました。
特に、画像が多いギャラリーページなどに設置してあげるのが良いかと思います。
以上、ウェブラボ技術メモでした。
関連記事こちらの記事も合わせてどうぞ。