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