はじめに
一般に画像を含む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に示します。
<!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プラグインの動作をカスタマイズできます。
| 設定値 | 設定内容 | デフォルト値 |
|---|---|---|
| threshold |
画像を遅延読込する閾値 （例：200に設定すると画像が ブラウザ画面に入る200ピクセル手前で読込開始） |
0 |
| event | 遅延読込を発生させるイベント | scroll |
| effect |
画像表示時の効果 （fadeinに設定すると画像がフェードインされる） |
show （効果なし） |
| skip_invisible | 非表示に設定された画像を読み込まない | true |
| failure_limit |
遅延読込対象の画像を検索するループ回数 （HTMLにおける画像の記述順と実際の表示順が 一致しないレイアウトにおいて調整が必要） |
0 （最初の対象画像が見つかったら 処理終了） |
（4）は遅延読込させる画像です。遅延読込させる画像ファイルはimgタグのdata-original属性に設定します。一方src属性には、画像が遅延読込されるまでの間に表示させる画像を指定できます（指定しない場合は灰色のデフォルト画像が表示されます）。
コード1をWebブラウザで表示させると、まずブラウザウインドウ内の画像だけが先に読み込まれてフェードインされます。次にWebページをスクロールさせることで、ウインドウ内に入った画像が随時読み込まれてフェードインで表示されます。
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"
});
