Movable Type 備忘録

 LazyLoad with jQuery

こんにちわ^^

今回は jQuery で画像の遅延読込みを実現する LazyLoad プラグインのご紹介です。
といってもこのプラグインもだいぶ前からあるものですが、今回お友達がフォトログ( らしき!? )サイトを作りたいとのことなのでお手伝いすることになりました (●＞∀＜●)／
フォトログといえば写真画像をたくさん使うだろうし、画質もやっぱりそれなりだとファイルサイズも大きなものとなるので表示速度が遅くなりがちです。
なので、わたしのサイトでは不要なプラグインだったのですが、急遽ブクマから探して使ってみたんですね (￣∇￣)b

サンプルを表示できませんでした。

このプラグインは画像の読込みを、スクロールされたときだったり、クリックされたときだったりと読込みを遅らすことができるプラグインです。

LazyLoad プラグインは以下のページから入手できます。

使い方

使い方はカンタンで、上記サンプルは以下のようにマークアップしてます。

マークアップ

  1. <p id="lazy1" class="lazy"><img src="img/lazy1.jpg" width="320" height="240" alt="Lazy Load Sample1" /></p>
  2. <p id="lazy2" class="lazy"><img src="img/lazy2.jpg" width="320" height="240" alt="Lazy Load Sample2" /></p>

見て分かるように普通ですね (;￣∇￣A 特に変わったことはありません。
画像の遅延読込みの仕組みってのは、実は単純に読込む画像ファイルの URL を適当なタイミングで差し替えるだけなようです。
最初はサイズの小さな画像ファイルで表示させといて、後で本来の URL に差し替えるって感じですかね。
で、以下が HTML ヘッダに追加する、LazyLoad の使用例です。

LazyLoad コード

  1. $(function(){
  2. $("#lazy1 img").lazyload({
  3. placeholder: "img/lazy_dummy1.gif",
  4. effect : "fadeIn",
  5. event : "click"
  6. });
  7. $("#lazy2 img").lazyload({
  8. placeholder: "img/lazy_dummy2.gif",
  9. effect : "fadeIn",
  10. event : "sporty"
  11. });
  12. });
  13. $(window).bind("load", function() {
  14. var timeout = setTimeout(function() {$("#lazy2 img").trigger("sporty")}, 5000);
  15. });

青字が上記サンプルでいうところの、クリック時に画像を読込ませるためのコードです。
赤字がページがロードされてから 5 秒後に読込みを行うためのコードになります。

上記コードは、サンプルの都合上何らかのアクションを必要とする遅延読込みですが、デフォルトではページスクロールで必要なタイミングで自動的に画像読込み行うようになります。
各オプションは以下の通りです。

  • placeholder

    代替画像ファイルのパス( or URL )を指定します。サイズの小さな画像ファイルを用意してそのパスを指定してください。これは必須です。

  • threshold

    画像読込み開始までの閾値をピクセル数で指定します。 たとえば 200 とした場合スクロールしたことで 200 ピクセル以上露見された場合に遅延読込みが開始される･･･というかんじでしょうか。デフォルトは 0 です。

  • effect

    遅延読込み後のエフェクト表示の有無を指定します。 上記サンプルのようにフェード( fadeIn )しながら表示させたい場合にはこのオプションを指定します。デフォルトは普通に表示( show )です。

  • event

    遅延読込みのトリガーを指定します。 上記サンプルだと、クリック( click )イベントとタイマーイベント( sporty )による遅延読込みを行ってます。デフォルトはページスクロールしたことで該当する画像が露見した場合に読込み開始となるスクロール( scroll )になります。

    また、タイマーイベントによる遅延読込みの場合には上記赤字のコードのように、タイマー処理させる必要があります。

  • failurelimit

    同時読込み最大数を指定します。デフォルトでは 0 となってます。

以上です。

 Trackback Pings(0)

No trackbacks found.

 Comments(0)

No comments found.

 Post a Comment

 

コメント用フィード