2013-01-29 Tue

Lazy Loadでページ表示完了後に画像を表示させる

デジタル一眼レフがかなり手頃な値段で購入出来るようになったり、画像加工サービスが広まったりで、お気に入りの画像を大量に表示させたい、という方が増えてきたように思います。それは賑やかで楽しいサイトになるかもしれませんが、ページに大量の画像を表示する際、リクエストがサーバーに送信されその返事を待つ、という流れが画像の数だけ繰り返されるので、ページが表示されるまでに時間がかかってしまいますし、サーバーに負荷もかかります。サーバーにしたら矢継ぎ早に注文されて、「…ちょ、待てよっ！」って感じになるわけですね。

そこで便利なのが、ブラウザのウィンドウに表示されていない画像は一旦無視しておいて、表示領域にはいった時にあらためてリクエストを送信することで、ページ表示の高速化、サーバー負荷の軽減ができるjQueryのプラグイン「Lazy Load」です。

導入するのはとても簡単です。
お決まりですが、Lazy Loadよりも先にjQueryを読み込ませます。このプラグインの発動はページが表示されてからで十分なので、head内でjQueryを読み込み、プラグイン自体はbodyの閉じタグ直前で読み込んでもいいと思います。

………
<script type="text/javascript" src="jquery.js"></script>
</head>

<body>
………
<script type="text/javascript" src="jquery.lazyload.js"></script>
</body>
</html>

次に、imgタグの記述に一工夫加えます。通常は

<img src="image.jpg" alt="代替テキスト" width="幅" height="高さ" />

ってな感じですが、これを

<img src="dummy.jpg" data-original="image.jpg" alt="代替テキスト" width="幅" height="高さ" class="lazy" />

と変更します。見慣れない要素「data-original」というのが実際に表示させる画像で、「src」要素には実際に表示させる「data-original」を読み込むまでに仮に表示させる画像を指定します。

設定はLazy Loadを読み込んだ直後に行います。エフェクト等のオプションを指定しない場合は以下のようにとてもシンプル。

………
<script type="text/javascript" src="jquery.js"></script> 
</head>

<body>
………
<script type="text/javascript" src="jquery.lazyload.js"></script>
<script>
$('.lazy').lazyload({
});
</script>
</body>
</html>

この場合はclass「lazy」にのみこのプラグインを有効にしています。
全ての画像に対して有効にしたい場合は

<script>
$('img').lazyload({
});
</script>

とすればOKです。

jQueryの画像表示系プラグインにおなじみのエフェクトも使用できます。

<script>
$('.lazy').lazyload({
    effect: 'fadeIn'
});
</script>

この場合はフェードインさせながら画像が差し変わります。

その他フェードインさせる時間など細々したオプションは配布サイトをご覧ください。特定の範囲にだけLazy Loadを有効にしたり、クリックするまで画像を表示させないようにしたりもできます。画像が表示領域に来なくても、ページ表示完了から一定時間経てば勝手に画像を読み込むことも出来るみたいですね。

配布サイトを見ていて気がつきましたが、このプラグインはJavaScriptを無効にしていると本来の画像を表示させることが出来ません。まあ最近はあまり気にする必要もないのかなぁ…とも思いますが、慎重な方は「Fallback for Non JavaScript Browsers」という項目にあるように、noscriptタグを利用して、JavaScriptが無効な場合は普通にimgタグを表示させて、Lazy Load用のimgタグはスタイルシートで非表示にして利用すればいいと思います。

HTMLはこんな感じ。

<img src="dummy.jpg" data-original="image.jpg" alt="代替テキスト" width="幅" height="高さ" class="lazy" />
<noscript><img src="image.jpg" alt="代替テキスト" width="幅" height="高さ" /></noscript>

で、スタイルシートはこんな感じで。

.lazy {
display: none;
}

「スタイルシートまで無効にされてたらどうすんだ？」と思いましたが、流石にそこまで意固地な人は、それなりに不便な状態に慣れているはず…と思うことにしました（笑）。

Download：Lazy Load

2013-01-29 Tue / Category - Web

このページの先頭に戻る

Copyright 2013 - Heartfield