画像の表示をコントロールするjQueryプラグイン「Lazy Load」の使い方

画像の表示をコントロールするjQueryプラグイン「Lazy Load」の使い方

Lazy Loadはブラウザの表示領域に画像が入った時に画像を表示してくれるjQueryプラグインです。
1ページ内で多量の画像がある場合、下にスクロールして画像が表示領域に入ると一枚ずつ表示してくれるため、ページの表示が軽くなります。

最近はあまり見なくなってきた気がしますが、インターフェイスに気を使っていたブログではよく見かけた気がします。

Lazy Loadもそこまで手間のかかるタイプではないため、知っておいても損はないjQueryプラグインです。

以下が本家サイトとGit Hubです。

• Lady Load
• Git Hub

phptemp_ll_160407.zip

「Lazy Load」を組み込んだページのサンプルです。

• 組み込み済みサンプル

今回、フッター画像は全ページでフェードイン表示します。
” /index.php ”のみ、全画像がフェードイン表示します。
その他のコンテンツページにある画像はフェードインしませんので、見比べてみて下さいね。

当サイト内の「SEOの基礎知識」の中のコンテンツです。

• コンテンツSEOのためのWEBサイトテンプレート（PHP）

凡そ、流れ的には以下のような順番です。

1. 設定ファイルとjQueryを読み込み、htmlの画像タグの書き換えをする。
2. ファイルをアップロードしましょう！

このjQueryプラグインも手軽に導入出来ますので、肩肘張らずに見て下さいね。
では、すすめていきます。

設定ファイルや設定記述は、全ページ共通にしています。
「 /_set/js.php 」に以下の記述をします。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="/js/pagetop.js"></script>

<script type="text/javascript" src="/js/jquery.lazyload.js"></script>
<script type="text/javascript">
$(function() {
$("img.lazy").lazyload({
	effect : "fadeIn"
});
});
</script>

今回、もともと読み込ませていたjQueryファイルでは動作しなかったので、新しいバージョンのファイルを読み込ませています。
google様、ありがとうございます。ｗ

あと、ダウンロードしてきたフォルダ内のルートにある「 /jquery.lazyload.js 」を読み込みます。
このファイルについては特に触りませんので、minファイルを読み込んで頂いても構いません。

今回、画像の表示の仕方がフェードインで表示されるオプションを記述しています。
フェードイン表示以外は、全てデフォルトです。

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

本家サイトのデモでも見ることが出来ますし、ダウンロードファイル中にも多数のオプション記述がありますので、オプションの内容は本家にてご確認下さい。
ダウンロードファイル「 /jquery_lazyload-master/ 」の中にhtmlファイルが入っていまして、そのhtmlファイルで確認出来ます。

次にhtmlファイル中の画像タグの内容を書き換えます。
フッター部分を例にとりますね。

<img src="/img/fbnr.gif" alt="" />

<img data-original="/img/fbnr.gif" alt="" class="lazy" />

修正するべき点は以下の二点です。

• ” src="" ”を” data-original="" ”に修正する。
• ” class="lazy" ”を付与する。

上記の二点を修正すると、その画像タグの画像はブラウザの表示領域に入った時に表示されます。

後は、それぞれのファイルを適宜アップロードすれば完了です！
お疲れさまでした。

このまま作業を終えて頂いても全く問題ございませんが、画像タグの” src ”が無いということは、W3Cの制定しているルールを無視することになります。
このままでいいのか・・・。

どうやらこういったことに配慮されているせいか、元の仕様で” src ”を入れたままでも問題ないようにされているようです。
フェードインする画像のタグを以下のようにすると、フェードインする直前に確認出来ますが、画像はそのまま表示されるようです。

<img data-original="/img/fbnr.gif" src="/img/spacer.gif" alt="" class="lazy" />

上記のようにスペース用の画像を設置するといいでしょう。
「 src="spacer.gif" 」はどんな画像でも構いません。
サイズはCSSで調整したり、” width="***" ”や”hight="***"”を入れてもいいでしょう。

上記のように対応することで、諸々に配慮した記述になるかなと思います。
配布テンプレートではこの記述はしていませんので、念のため・・・。

WEBサイトテンプレート（PHP）の修正にあたって、以下の点に配慮しています。

• 今回、サンプルにしたWEBサイトテンプレート（PHP）は「 phptemp_160202.zip 」です。

いかがでしたでしょうか？
比較的簡単に組み込めましたね。

読み込ませているJavascriptもそこまで重くないのでブラウザへの表示速度にそこまで影響しません。
ということで、表示する画像の量が多いページをお持ちの運営者様には必須です！

あまり手間もかかりませんので、是非使ってみて下さい。

執筆 : 清水 隼斗

画像の表示をコントロールするjQueryプラグイン「Lazy Load」の使い方のAMPページ