東京都新宿区のWeb制作会社 ウェブラボ株式会社

クリエイターブログ

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

2014.09.24 Posted by

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

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

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

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

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

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

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

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

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

■HTML head内

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

■HTML

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

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

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

オリエンシートダウンロード

オリエンシートダウンロード

PAGETOP

お問い合わせContact

まずはお気軽にご相談ください。

Web制作・コンサルティング・システム開発に関するお問い合わせ・お見積もり依頼は、
電話・問い合わせフォームより受け付けております。(受付時間:平日9:30〜18:30)

〒160-0004 東京都新宿区四谷4丁目33-2
マーキュリースクエア4F

TEL:03-5366-3277 FAX:03-5366-3278