jquery.lazyload.jsピクチャ遅延ロード

jqueryでlazyload.jsスクリプトプラグインは、スクロールバーに従って画像が徐々に現れる華麗な効果を実現します.マルチピクチャページの読み込み速度を速め、閲覧者の目の前にできるだけ早く表示させることができます.大量の画像が存在するページに特に適する.実装原理:jquery.lazyload.jsはJavaScriptで作成されたjQueryプラグインです.長いページのピクチャのロードを遅らせることができ、閲覧者が現在のピクチャを表示しているかどうかを判断することによって、デフォルトでプリセットの塗りつぶしピクチャ「grey.gif」をロードし、閲覧者がマウスホイールをスライドしたり、ピクチャの位置を閲覧したりするまで、本当のピクチャをロードすることができます.多くの大きなピクチャを含む長いページでピクチャのロードを遅らせると、ページのロード速度が速くなります.ブラウザは、表示された画像をロードした後、準備完了状態になります.場合によっては、サーバの負担を軽減することもできます.実装方法:Webサイトのページヘッダにjsコードを追加するだけで実現できます.1、関連ファイルをダウンロードしてアップロードjquery-1.4.2.min.jsダウンロードjquery.lazyload.jsダウンロードプリフィル画像grey.gif 2は、現在のトピックの「header.php」に次のJS呼び出しコードを適宜追加する. 

  
  
  
  

   
   
   
   
<script type="text/javascript" src="jquery-1.7.2.min.js"></script> 
   
   
   
   
<script type="text/javascript" src="jquery.lazyload.js"></script> 
   
   
   
   
<script type="text/javascript"> 
   
   
   
   
jQuery(document).ready( 
   
   
   
   
function($){ 
   
   
   
   
$("img").lazyload({ 
   
   
   
   
placeholder : "grey.gif", 
   
   
   
   
effect      : "fadeIn" 
   
   
   
   
}); 
   
   
   
   
}); 
   
   
   
   
</script> 
   
   
   
   
<style> 
   
   
   
   
.container{ 
   
   
   
   
    width:100%; 
   
   
   
   
    height:100%; 
   
   
   
   
    margin:auto; 
   
   
   
   
    border:1px solid #eee; 
   
   
   
   
} 
   
   
   
   
</style> 
   
   
   
   
<div class="container"> 
   
   
   
   
    <img src="Sunset.jpg" /> 
   
   
   
   
    <img src="Sunset.jpg" /> 
   
   
   
   
    <img src="Sunset.jpg" /> 
   
   
   
   
    <img src="Sunset.jpg" /> 
   
   
   
   
    <img src="Sunset.jpg" /> 
   
   
   
   
    <img src="Sunset.jpg" /> 
   
   
   
   
    <img src="Sunset.jpg" /> 
   
   
   
   
    <img src="Sunset.jpg" /> 
   
   
   
   
    <img src="Sunset.jpg" /> 
   
   
   
   
    <img src="Sunset.jpg" /> 
   
   
   
   
    <img src="Sunset.jpg" /> 
   
   
   
   
    <img src="Sunset.jpg" /> 
   
   
   
   
    <img src="Sunset.jpg" /> 
   
   
   
   
    <img src="Sunset.jpg" /> 
   
   
   
   
    <img src="Sunset.jpg" /> 
   
   
   
   
</div> 
  
  
  
  

公式プレゼンテーションのアドレス:http://www.appelsiini.net/projects/lazyload/enabled_fadein.html$(「img」)は、コンテンツ部分のみに対して$(「.content img」)に変更できるように、ページ内のどのimgが有効になるかを定義するために使用できます.
 
Jquery.LazyLoad.jsプラグインパラメータの詳細:LazyLoadプラグインのいくつかのパラメータについて説明し、使用者がより適切な効果を得ることができます.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枚ロードすることを意図する.
 
詳細:
http://blog.sina.com.cn/s/blog_6967301a0100q4s2.html