• コーディング ファクトリーHOME
  • Coding Methodology
  • 第73回 スクロールで画像の遅延読み込みを実現する

コーディングメソドロジー

第73回 スクロールで画像の遅延読み込みを実現する

今年に入ってからご要望が多い機能の一つに、画像の遅延読み込み(Lazy load)というものがあります。レスポンシブサイトの需要が高まっている昨今では、スマートデバイス環境でもスムーズに閲覧できるように、サイトの軽量化が今まで以上に求められ始めています。今回は、サイト軽量化の一つの手段として画像の遅延読み込みを行う2つの方法をご紹介させていただきます。

画像の遅延読み込みとは

初回アクセスのロード時には画像は読み込ませず、ウインドウの表示領域に入った時に初めて読み込みを開始させるというものです。
ロード時に全画像を一括で読み込ませるのではなく、スクロールを用いて分割して読み込みを開始させることでロードの負担を分散させる(HTTPリクエストを減らす)ことができます。ちなみにこれはGoogleの画像検索ページにも使われています。

実装方法その1 「jquery.lazyload.js」

こちらは画像遅延読み込みの代表的なプラグインで、手軽に実装できるのが特長です。

⑴ ①-1で、jquery本体とプラグインを読み込みます。

⑵ ①-2で、任意の画像を設置します。

このとき、src属性には1x1の透過pngのダミー画像を設置しておきます。
data-originalという属性に本来読み込ませたい画像を設置します。

①-1で、「lazy」というクラスを持つimgタグをターゲットとして指定します。

※ jquery.lazyload.jsにはオプションが用意されており、遅延読み込み時のeffectの指定やスピードの指定もできます。ダウンロード等、詳細は下記URLをご確認ください。

http://www.appelsiini.net/projects/lazyload

【SETTING①-1】

【HTML①-2】

【JS①-3】

実装方法その2 「jquery.inview.js」

ウインドウの表示領域に入った時にイベントを実行させるというプラグインです。画像遅延読み込みを目的としたプラグインではありませんが、この機能を活用することで同様の効果を得ることができます。

⑴ ②-1で、jquery本体とプラグインを読み込みます。

⑵ ②-2で、任意の画像を設置します。

このとき、src属性には1x1の透過pngのダミー画像を設置しておきます。
data-originalという属性に本来読み込ませたい画像を設置します。

②-3で、「lazy」というクラスを持つimgタグをターゲットとして指定します。

※ inviewはカスタマイズ性が非常に高いです。②-4エリア内を編集することでオリジナルの動きを付けることができたり、画像以外の要素に対しても表示領域に入った時にイベントを実行させることができます。ダウンロード等詳細は下記URLです。

https://github.com/protonet/jquery.inview

【SETTING②-1】

【HTML②-2】

【JS②-3】

  • 大規模サイト制作のご案内 大規模サイトプロジェクトのポイントやサービス内容をご紹介
  • レスポンシブWebデザインセミナーがDVDになりました。
  • コーディングメソドロジー
  • コーディングファクトリートピックス
  • 受注活動サポートサービス
  • コーディングファクトリーニュース
  • IllustratorでのWebデザイン
  • 求人案内
  • 株式会社モノサス
  • お問い合わせ

    コーディング相談ダイヤル

    お問い合わせ

  • ご相談、お問い合わせフォーム

    ご相談、お問い合わせフォーム