【画像の遅延読込】jquery.lazyload.jsの使い方

なぜ、lazy loadを使うのか?

lazy loadは、画像データなどを遅れて読み込ませる(遅延読み込み)ために使用する、jQueryプラグインです。
lazy loadを実装することにより、WEBサイトの閲覧者が画像の近くまでスクロールするまで、画像が読み込まれません。

メリット① データ通信料の節約

近くまでスクロールしなければ、画像ファイルの読み込みがされないため、ページの途中でリンクを踏んで別のページに遷移した場合、その部分までの画像データだけを読み込むことになります。

特にスマホでWEBサイトを閲覧する場合、毎月のデータ通信量を無駄にさせない設計にするほうが、ユーザーに親切なサイトであると言えます。またスマホの場合、サイトのコンテンツが縦長に配置されることになるため、lazy loadによるデータ通信料削減の恩恵は大きなものとなります。

メリット② ページ表示速度の向上

WEBサイトにアクセスしてから、最初のページが表示されるまでに発生するデータ通信量が減るので、その分ページの表示にかかる時間が減ります。
そのページにある画像ファイルを全部読み込まないとページが表示されないのと、画面内に入る画像ファイルだけ読み込めばよいのとでは、データ通信量に大きな差がでるので、当たり前といえば当たり前ですね。

lazy loadの基本的な使い方

手順① ライブラリのダウンロード

まず、GitHubで最新のライブラリをダウンロードします。
右上にある、緑色の「Clone or download」をクリックし、さらにプルダウンで現れる「Download ZIP」というボタンを押して、ファイルをダウンロードしてください。
ダウンロードが完了したら、解答して使える状態にしておきましょう。

▼GitHubリンク

tuupola/jquery_lazyload|GitHub, Inc.

Lazy Load Plugin for jQuery
Lazy Load delays loading of images in long web pages. Images outside of viewport wont be loaded before user scrolls to them. This is opposite of image preloading.

手順② ライブラリを読み込ませる

解凍したファイルから、「jquery.lazyload.js」をWEBサーバーにアップロードします。

HTML <script src="jquery.js" type="text/javascript"> <script src="jquery.lazyload.js" type="text/javascript"> <script type="text/javascript" charset="utf-8"> $(function() { $('img.lazy').lazyload(); }); </script>

※順番が変わるとlazy loadは動きません。

手順③ 画像のHTMLコードを修正する

画像ファイルのコードを、以下のように変更してください。

  • src属性に入れる
  • data-original属性に画像のURLを入れる
  • lazyというclass属性を追加
HTML[変更前] <img src=“画像のURL” >
HTML[変更後] /* ダミー画像なし */ <img data-original=“画像のURL” class=“lazy”> /* ダミー画像あり */ <img data-original=“画像のURL” src=“ダミー画像のURL" class=“lazy”>

下のように設定すれば、画像ファイルが読み込まれるまでダミー画像が表示され、読み込まれると画像が切り替わるようになります。

lazy loadのカスタマイズ方法

lazy loadにはオプションがいくつかあり、画像の読み込みを開始する距離、エフェクトなどをカスタマイズすることができます。

lazy load のオプション

threshold
画像が読み込み開始される条件となる高さの差を指定できます。
現在の表示範囲と画像ファイルの高さの差が、指定して数値のピクセル数以内になると、画像ファイルが読み込まれるようになります。
デフォルトは0なので、スクロールした時に、画像ファイルが画面に入ってくると同時に、その画像ファイルの読み込みが開始されます。

event
遅延読み込みを発生させるイベントを指定できます。デフォルトはscrollになっています。

effect
画像が表示される時の効果を指定できます。デフォルトはshow(効果なし)になっています。
fadeInにすると、徐々に表示されるようになります。

設定例

HTML[変更後] <script> $(function () { $('img.lazy').lazyload({ threshold : -100, effect : "fadeIn", effect_speed: 1000 }); }); </script>

コメントを残す