圖片延遲加載插件修正版下載與分析
您當(dāng)前位置:首頁 > 紅訊頻道 > 網(wǎng)絡(luò)技術(shù)
紅軟基地 推薦
2013-09-29
從網(wǎng)上下載來的版本多多少少都有些BUG,尤其是加載后在IE6和IE7下圖片閃動是個大問題,在網(wǎng)上查了很久,也沒有找到相關(guān)的解決方案。沒解決方案,就得發(fā)揮咱DIY的精神,自己想法解決,分析了BUG,理了理思路,結(jié)合前段時間我做彈出窗口特效的方法,解決了Jquery.LazyLoad.js的兼容問題,現(xiàn)將思路和方法與大家分享一下。
解決思路大致是兩點,一是從LazyLoad本身的濾鏡參數(shù)下手,發(fā)現(xiàn)有一個參數(shù)在IE6和IE7是可以用的,就是show,那么在IE6和IE7下用這個特效;二是IE8以上(包括IE8)、FireFox,Chrome等非IE核心的瀏覽器對fadeIn特效都支持,那么在這些版本的瀏覽器中就使用這種酷酷的特效。
Jquery.LazyLoad.js使用方法:
1、將以下文件存放在同一目錄下面:
jquery.js
jquery.layzload.js
grey.gif
2、在需要使用特效的地方加上如下的代碼:
Jquery.LazyLoad.js插件修正版下載:
Jquery.LazyLoad.js插件參數(shù)詳解:下面對LazyLoad插件的一些參數(shù)進行說明,供使用者做出更貼切的效果。
1,用圖片提前占位
placeholder : "img/grey.gif",
參數(shù):placeholder,值為某一圖片路徑.此圖片用來占據(jù)將要加載的圖片的位置,待圖片加載時,占位圖則會隱藏
2,載入使用何種效果
effect : "fadeIn",
參數(shù):effect(特效),值有show(直接顯示),fadeIn(淡入),slideDown(下拉)等,常用fadeIn
3,提前開始加載
threshold : 200,
參數(shù):threshold,值為數(shù)字,代表頁面高度.如設(shè)置為200,表示滾動條在離目標(biāo)位置還有200的高度時就開始加載圖片,可以做到不讓用戶察覺.
4,事件觸發(fā)時才加載
event : "click",
參數(shù):event,值有click(點擊),mouseover(鼠標(biāo)劃過),sporty(運動的),foobar(…).可以實現(xiàn)鼠標(biāo)莫過或點擊圖片才開始加載,后兩個值未測試…
5,對某容器中的圖片實現(xiàn)效果
container: $("#container"),
參數(shù):container,值為某容器.lazyload默認在拉動瀏覽器滾動條時生效,這個參數(shù)可以讓你在拉動某DIV的滾動條時依次加載其中的圖片
6,圖片排序混亂時
failurelimit : 10,
參數(shù):failurelimit,值為數(shù)字.lazyload默認在找到第一張不在可見區(qū)域里的圖片時則不再繼續(xù)加載,但當(dāng)HTML容器混亂的時候可能出現(xiàn)可見區(qū)域內(nèi)圖片并沒加載出來的情況,failurelimit意在加載N張可見區(qū)域外的圖片,以避免出現(xiàn)這個問題.
原標(biāo)題:圖片延遲加載插件 來源:紅訊頻道