jquery.lazyload-1.9.3中文文档 -- 延迟加载图片的jQuery插件
最近使用 jquery.lazyload.js 這個jQuery插件的時候, 突然發現對這個插件相對全面的介紹不多.
特別是對lazyload()方法中的配置選項的介紹少之又少.
隨即整理一份供大家參閱.
說明: 我使用的版本是1.9.3
廢話不多少, 直接上代碼:
一, 使用小Demo
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Demo</title><style>#container {width: 765px;margin: auto;}#container img {width: 100%;}</style> </head> <body><div id="container"><img class="lazy" data-original="./image/img1.jpg" alt=""><img class="lazy" data-original="./image/img2.jpg" alt=""><img class="lazy" data-original="./image/img3.jpg" alt=""><img class="lazy" data-original="./image/img4.jpg" alt=""><img class="lazy" data-original="./image/img5.jpg" alt=""><img class="lazy" data-original="./image/img6.jpg" alt=""></div> </body> <script src="./js/jquery-1.11.0.min.js"></script> <script src="./js/jquery.lazyload.js"></script> <script>$(function() {$('img.lazy').lazyload({ effect: "fadeIn" }); });</script> </html>下方有完整代碼鏈接.
上述Demo中僅用到了 lazyload 配置選項中的 effect 屬性, 接下來介紹下該版本提供的所有屬性和具體用法.
首先, 先來一張代碼截圖:
?
對應代碼如下:
$('img.lazy').lazyload({// threshold: 提前開始加載高度.threshold: 200,// failure_limit: 同 failurelimitfailure_limit: 10,// event: 設置何種事件觸發時才加載, 默認 scrollevent: 'click',// effect: 使用何種載入效果effect: "fadeIn",// container: 對某容器中的圖片實現效果container: $("#container"),// data_attribute: 用于設置 lazyload 操作的自定義屬性(data-后面的屬性名)data_attribute : "attr",// skip_invisible: 是否 不加載不可見圖片. true 不加載, false 加載.skip_invisible : false,// appear:?用于在圖片加載之前到顯示圖片之間的處理函數，一般用于展示加載動畫.appear: function() {},// load:?用于圖片加載完畢之后執行的函數.load: function() {},// placeholder: 設置占位圖片路徑placeholder : "img/lazy.gif",// failurelimit: 一次加載圖片的張數(圖片排序混亂時使用)failurelimit : 10,// effectspeed: 設置動畫持續時長, 單位毫秒effectspeed : 1000,});從中可一目了然的看到所有可配置屬性. 接下來逐個介紹對應屬性.
1,?threshold: 默認值 0
threshold: 值為數字, 用于設置提前開始加載高度. 如設置為200, 表示滾動條在離目標位置還有 200 的高度時就開始加載圖片, 可以做到不讓用戶察覺.
2,?failure_limit : 默認值 0
failure_limit: 值為數字, 同?failurelimit(下文介紹)
3, event: 默認值 "scroll"
event: 用于設置觸發加載的時機.?值有scroll(滾動), click(點擊), mouseover(鼠標劃過), sporty(運動的), foobar(…).可以實現鼠標莫過或點擊圖片才開始加載,后兩個值未測試…
4, effect: 默認值 "show"
effect: 用于設置顯示圖片是的動畫效果. 值有: show(直接顯示), fadeIn(淡入), slideDown(下拉)等
5, container: 默認值 window
container: 值為某容器, 用于設置對某容器中的圖片實現效果. lazyload默認在拉動瀏覽器滾動條時生效, 這個參數可以讓你在拉動某DIV的滾動條時依次加載其中的圖片
6, data_attribute: 默認值 "original"
data_attribute: 用于設置 lazyload 操作的自定義屬性(data-后面的屬性名)
7, skip_invisible: 默認值?true
skip_invisible: 設置是否加載不可見的圖片.
?Lazy Load 插件默認對隱藏的圖片不加載(例如 display:none ). 這樣做有助于性能的優化. 如果希望連隱藏的圖片一起加載,則可以把 skip_invisible 設為 false .
8, appear: 默認值 null
appear:?用于在圖片加載之前到顯示圖片之間的處理函數，一般用于展示加載動畫.
9, load: 默認值 null
load:?用于圖片加載完畢之后執行的函數.
10, placeholder: 默認值 "data:image/png;base64,iV......"
placeholder: 用于設置占位圖片.
值為某一圖片路徑. 此圖片用來占據將要加載的圖片的位置, 待圖片加載時, 占位圖則會隱藏
接下來的兩個是兼容低版本的屬性, 在該版本中正常使用.
11,?effectspeed : 毫秒數
effectspeed: 用于控制動畫的速度.
屬性默認是空的, 所以如果不設置它, 動畫的時間為400毫秒.
12,?failurelimit: 值為數字. 在圖片布局混亂時使用.
Lazy Load 有一個循環查找 img 的機制. 根據 HTML 文檔的布局從上往下查找, 當找到第一個并未顯示/加載的 img 時, 就會停止往下查找.(其實就是對 $("img.lazy") 這個對象(組)進行順序查找)
那這個 failure_limit 的屬性有什么用呢?
現在網站設計時, 都會用到大量的定位樣式, 如: float 和 position , 這樣在瀏覽器呈現的布局效果和 HTML 文檔中的 DOM 順序有很大差異.
這樣就會存在一種情況, 某 <img> 標簽已出現在屏幕上,但它卻無法顯示(因為按順序加載的話, 還沒排到它)!!?
當Lazy Load 在找到第一個未顯示的 <img> 標簽時, 查找已經被終止了, 并沒有繼續往下遍歷.
當設置了?failure_limit 屬性之后,? Lazy Load 會查找到對應個數未顯示的 <img> 標簽處.
當在圖片多且布局復雜的頁面時, failure_limit 的作用就很大了.
原文還溫馨提示: If you have a funky layout set this number to something high.? 如果你的網站布局很"變態",建議把該值調得更高.
?
在這里獲取本章源碼.
?
本章結束。
?
如果文章對你有幫助，碰巧想請我喝杯咖啡，可以點擊這里。
總結
以上是生活随笔為你收集整理的jquery.lazyload-1.9.3中文文档 -- 延迟加载图片的jQuery插件的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： win7下4GB内存提示：找到4GB，可
- 下一篇： 用电脑最忌讳的18个小动作