jquery.lazyload.js圖片消極式載入

標籤：ade   enter   oba   jquer   事件觸發   img   測試   java   數字   

一、外掛程式介紹

jquery.lazyload.js 是一個用 JavaScript 編寫的jQuery 外掛程式. 它可以消極式載入長頁面中的圖片. 在瀏覽器可視地區外的圖片不會被載入, 直到使用者將頁面滾動到它們所在的位置.這與圖片預先載入的處理方式正好是相反的.在包含很多大圖片長頁面中消極式載入圖片可以加快頁面載入速度.瀏覽器將會在 載入可見圖片之後即進入就緒狀態. 在某些情況下還可以協助降低伺服器負擔. 

二、外掛程式作者 

JS下載：http://www.ijquery.cn/js/lazyload/jquery.lazyload.js 

預覽： http://www.ijquery.cn/demo/lazyload 

打包下載：http://www.ijquery.cn/demo/lazyload/lazyload.zip

三、相容性

需要jquery1.3.0版以上，或者 zepto1.0.0以上。

IE6+	Chrome	Firefox	Opera	Safari

 

 

  四、參數

placeholder : "img/grey.gif",     //用圖片提前佔位effect : "fadeIn",    //載入使用何種效果,effect(特效),值有show(直接顯示),fadeIn(淡入),slideDown(下拉)等,常用fadeInthreshold : 200,    //提前開始載入event : "click",      //事件觸發時才載入,event,值有click(點擊),mouseover(滑鼠划過),sporty(運動的),foobar(…).可以實現滑鼠划過或點擊圖片才開始載入,後兩個值未測試…failurelimit : 10,     //圖片排序混亂時 ,failurelimit,值為數字.

五、最簡使用教程

lazyload預設在找到第一張不在可見地區裡的圖片時則不再繼續載入,但當HTML容器混亂的時候可能出現可見地區內圖片並沒載入出來的情況,failurelimit意在載入N張可見地區外的圖片,以避免出現這個問題.

載入JS代碼

<script src="jquery-1.11.0.min.js"></script><script src="jquery.lazyload.js?v=1.9.1"></script>

HTML代碼,為圖片加入樣式lazy  圖片路徑引用方法用data-original

<img class="lazy" data-original="img/bmw_m1_hood.jpg"><img class="lazy" data-original="img/bmw_m1_side.jpg"><img class="lazy" data-original="img/viper_1.jpg"><img class="lazy" data-original="img/viper_corner.jpg"><img class="lazy" data-original="img/bmw_m3_gt.jpg"><img class="lazy" data-original="img/corvette_pitstop.jpg">

js出始化lazyload並設定圖片顯示方式

<script type="text/javascript" charset="utf-8">  $(function() {      $("img.lazy").lazyload({effect: "fadeIn"});  });</script>

jquery.lazyload.js圖片消極式載入