こんにちは！ランチ食べ放題は週一で！と、決めたはずなのに
今週2回目の食べ放題してしまったゆぅです！(恵比寿は美味しいところがたくさんあります。)

今回のテーマは「画像の時間差表示エフェクト」！(「エフェクト」ってかっこいい響きですねぇ。)
ページをスクロールするとふわっと表示される最近流行り（？）のアレですね。今後使うかもしれないのでさらっとまとめます。

材料

• いわずもがなのjQuery　もうお持ちなら必要ないです。
• Lazy Load Plugin for jQuery 画面に表示されるときに画像を読み込み開始してくれるプラグインだそうです。
• 1px×1pxの画像　（↑上のサイトではグレーの画像を使ってわかりやすくしてあったのですが、ご自分のサイトのカラーに合わせてご用意されるとよろしいかと。うちのサイトだと白ですね。）

古いjQueryだとdimensions.jsというのが必要だったのですが、新しいものはもう必要ないみたいです。

設定方法

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.lazyload.js"></script>
<script type="text/javascript">
$(document).ready(function () {
    $("img").lazyload({
	    placeholder : "w.gif",/*1px×1pxの画像のパス*/
        effect      : "fadeIn"
    });
});
</script>

上記、コードをhead内に書き込んでください。

• placeholder ：ダミーとして使われる画像です。最初はこれが表示されます。
• effect: “fadeIn”：フォードインのエフェクトで本来の画像が表示されます。

他にはこんな設定ができます。

• threshold ：先読み設定。これを設定しておくと表示される前に200画素をロードしておくそうです。
  例）threshold : 200
• event ：デフォルトではページスクロールがトリガーですが、クリック(click)やマウスオーバー（mouseover）でもトリガーになります。
  例）event : “click”
• failurelimit ：イメージが表示されたかどうかのチェック何回繰り返すか。
  デフォルトでは最初の画像をチェックすると止まるそうで、、、よくわからぬ～
  例）failurelimit : 10

imgにはサイズ（width,height）指定をしておいてください。その分placeholder画像が設定されます。

デモを見る

画像をいっぱい使ったサイトだとちょっと面白いかもしれませんね。

参考URL

スクロール時に画像の読み込みを開始するAjax Lazyload