jqueryベースのlazy loaderプラグインによるピクチャの遅延ロードを実現[簡単な使用]

jqueryのlazy loaderプラグインを使用することで、画像の遅延ロードを実現することができます.ページが長い場合、ユーザーのウィンドウ内の画像だけをロードし、ウィンドウ外の画像はスクロールバーを後ろにドラッグしてからロードすることができます.これにより、画像が多すぎてロードが遅いという弊害を効果的に回避できます.
lazy loaderプラグインを使用するのは簡単です.ページにlazy loaderプラグインを導入し、ページ上のピクチャに遅延ロード方法を呼び出すだけでいいです.Lazy loaderプラグインのダウンロードアドレス:http://www.appelsiini.net/projects/lazyload.具体的な使い方を見てみましょう.

 
  
 
  
 
  
 
  <br>$(document).ready( 
  <br>function(){ 
  <br>$("img").lazyload({ 
  <br>placeholder : "images/grey.gif", 
  <br>effect : "fadeIn" 
  <br>}); 
  <br>}); 
  <br> 
  
 
 

Jquery.LazyLoad.jsプラグインのパラメータの詳細:
1、画像で前倒し
placeholder : "img/grey.gif",
パラメータ:placeholder、値はあるピクチャパスです.このピクチャはロードするピクチャの位置を占有するために使用され、ピクチャがロードされると、ビットマップは非表示になります.
2、どのような効果をロード
effect : "fadeIn",
パラメータ:effect(特効)、値はshow(直接表示)、fadeIn(フェードイン)、slideDown(ドロップダウン)など、よく使われるfadeIn
3、事前にロードを開始
threshold : 200,
パラメータ:threshold、値は数字で、ページの高さを表します.200に設定すると、スクロールバーがターゲット位置から200の高さがある場合に画像をロードし始め、ユーザーに気づかれないようにすることができます.
4、イベントがトリガーされたときにロードされます
event : "click",
パラメータ:event、値はclick(クリック)、mouseover(マウスで漕ぐ)、sporty(動く)、foobar(...)があります.マウスを動かすか、画像をクリックしてからロードを開始することができます.後の2つの値はテストされていません...
5、ある容器の中の画像に対して効果を実現する
container: $("#container"),
パラメータ:container、値はコンテナです.lazyloadはデフォルトでブラウザのスクロールバーを引っ張るときに有効です.このパラメータはDIVのスクロールバーを引っ張るときに画像を順次ロードすることができます.
6、画像の並べ替えが乱れている場合
failurelimit : 10,
パラメータ:failurelimit、値は数字.lazyloadデフォルトでは、最初の可視領域にない画像が見つかった場合はロードを継続しませんが、HTMLコンテナが混乱している場合、可視領域内の画像がロードされていない場合があります.failurelimitは、この問題を回避するために、可視領域外の画像をN枚ロードすることを意図しています.