SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

jQuery UI/プラグインの活用

スクロールに応じて画像を遅延読込させるLazy Loadプラグイン

「jQuery プラグイン」の利用(18)

  • X ポスト
  • このエントリーをはてなブックマークに追加

 本連載では、JavaScriptライブラリとして利用頻度の高いjQueryとそのプラグインに着目して、その利用例を紹介します。今回はWebページのスクロールに応じて画像を遅延読込させるLazy Loadプラグインを用いて、多数の画像を含むWebページで効率よく画像を読み込む方法を紹介します。

  • X ポスト
  • このエントリーをはてなブックマークに追加

はじめに

 一般に画像を含むWebページをWebブラウザで表示する場合、画像が表示されるかどうかに関わらず、すべての画像がWebサーバーからダウンロードされます。そのため、縦に長いWebページに多数の画像が配置されている場合、スクロールしなければ表示されない多くの画像を読み込むために多くのロード時間を費やすことになります。この事象は特に、端末の処理能力が相対的に低く、ネットワーク状況も不安定になりがちなスマートフォンにおいて、より深刻な問題です。

 そこで本記事では、Lazy Loadプラグインを用いて画像が画面内にスクロールされた時に画像を遅延読込させる方法を紹介します。今回はPC向けページおよび、jQuery Mobileとの組み合わせによるスマートフォン向けページを作成していきます。またWebブラウザの開発ツールを用いることで遅延読込の効果を検証します。

対象読者

  • Webページの画像読込を効率的に行う方法を探している方
  • jQuery Mobileを用いて写真集など画像メインのスマホページを作りたい方

必要な環境

 PC向けページではjQuery 1.10.2、スマートフォン向けページではjQuery 2.0.3とjQuery Mobile 1.4.0を使用します。jQuery 2.0はInternet Explorer 6~8との互換性を切り捨てることでコードサイズを縮小しているため、PC向けにはjQuery 1.10系、スマートフォン向けにはjQuery 2.0系を使用します。なおInternet Explorer 6~8を考慮しなくてよいならば、PC向けでjQuery 2.0系を利用することもできます。

 今回は以下の環境で動作を確認しています。

  • Windows 7 64bit版
    • Internet Explorer 11
  • iOS 7.0.4
    • iPhone 5s 16GB SoftBank版
    • Safari
  • Android 4.2.2
    • Xperia Z SO-02E
    • Google Chrome 31.0.1650.59

設定はシンプル、画像をフェードインさせるなどカスタマイズも可能

 Lazy Loadプラグインは、http://www.appelsiini.net/projects/lazyloadにおいてMITライセンスで配布されています。jQuery.lazyload.js(通常版)またはjquery.lazyload.min.js(縮小版)をダウンロードして、Webサイト内に配置します。

 最初にPC向けWebページの全コードをリスト1に示します。

[リスト1]Lazy Loadプラグインを用いて画像の遅延読込を行うPC向けWebページ(lazyload_pc.html)
<!DOCTYPE html>
<html>
<head>
<title>LazyLoadサンプル(PC用)</title>

<!-- 文字コードの設定 -->
<meta charset="utf-8" />

<!-- jQueryの導入 -->
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

<!-- Lazy Loadの導入 ...... (1)-->
<script src="lazyload/jquery.lazyload.min.js"></script>

<!-- 画像のCSS ...... (2)-->
<style>
div.lazy-container
{
  text-align:center;
}
img.lazy
{
  width:640px;
  height:480px;
}
</style>

<!-- Lazy Loadの初期化処理 ...... (3)-->
<script>
$(document).ready(function(){
    $("img.lazy").lazyload({
        effect : "fadeIn"
    });
});
</script>
</head>
<body>

<!-- 遅延読込させる画像 ...... (4)-->
<div class="lazy-container">
  <div>
    <img class="lazy" src="img/dummy.png" data-original="img/001.jpg" />
  </div>
  <div>
    <img class="lazy" src="img/dummy.png" data-original="img/002.jpg"  />
  </div>
  <!-- 中略 -->
</div>

</body>
</html>

 (1)でLazy Loadプラグインを読み込む記述を行っています。(2)は遅延読込させる画像の配置やサイズを指定するCSSです。Lazy Loadプラグインを利用するには、遅延読込させるすべての画像(imgタグ)に対して明示的にサイズ(幅、高さ)を指定する必要があります。

 (3)でLazy Loadプラグインの初期化処理を記述しています。lazyクラスが指定されたimgタグをLazy Loadプラグインの処理対象にしています。またここでは画像表示時にフェードインさせるようオプション指定しています。このようにlazyloadメソッドの引数にオプションを指定したオブジェクトを与えることでLazy Loadプラグインの動作をカスタマイズできます。

表1 Lazy Loadプラグインの主なオプション
設定値 設定内容 デフォルト値
threshold 画像を遅延読込する閾値
(例:200に設定すると画像が
ブラウザ画面に入る200ピクセル手前で読込開始)
0
event 遅延読込を発生させるイベント scroll
effect 画像表示時の効果
(fadeinに設定すると画像がフェードインされる)
show
(効果なし)
skip_invisible 非表示に設定された画像を読み込まない true
failure_limit 遅延読込対象の画像を検索するループ回数
(HTMLにおける画像の記述順と実際の表示順が
一致しないレイアウトにおいて調整が必要)
0
(最初の対象画像が見つかったら
処理終了)

 (4)は遅延読込させる画像です。遅延読込させる画像ファイルはimgタグのdata-original属性に設定します。一方src属性には、画像が遅延読込されるまでの間に表示させる画像を指定できます(指定しない場合は灰色のデフォルト画像が表示されます)。

 コード1をWebブラウザで表示させると、まずブラウザウインドウ内の画像だけが先に読み込まれてフェードインされます。次にWebページをスクロールさせることで、ウインドウ内に入った画像が随時読み込まれてフェードインで表示されます。

図1 スクロールにより画像がフェードインで表示される
図1 スクロールにより画像がフェードインで表示される

JavaScriptが無効の場合の対処方法

 コード1は、ブラウザのJavaScriptが有効であることを前提としています。JavaScriptが無効の場合でも最低限画像が表示されるようにするには、コード1を以下のように修正します。全文はサンプルコード(lazyload_pc_fallback.html)を参照してください。

[1]noscriptタグを用いてJavaScript無効時に表示する画像を記述する

<div>
  <img class="lazy" src="img/dummy.png" data-original="img/001.jpg" />
  <noscript><img class="lazy_fallback" src="img/001.jpg" /></noscript>
</div>

[2]Lazy Loadプラグインで遅延読込させる画像を非表示とする

img.lazy {
    display: none;
}

[3]Lazy Loadプラグインの初期化処理において、
show()メソッドにより[2]で非表示とした画像を表示する

$("img.lazy").show().lazyload({
    effect : "fadeIn"
});

次のページ
jQuery Mobileとの組み合わせではeventプロパティの設定に注意

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
jQuery UI/プラグインの活用連載記事一覧

もっと読む

この記事の著者

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

WINGSプロジェクト  吉川 英一(ヨシカワ エイイチ)

WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS Twitter: @yyamada(公式)、@yyamada/wings(メンバーリスト) Facebook

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/7623 2014/02/21 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング