基于jquery的圖片懶加載js
更新時間:2010年06月30日 12:26:48 作者:
在京東商城瀏覽時, 會發(fā)現(xiàn)產(chǎn)品圖片只顯示了一屏, 當頁面向下滾動時下面的產(chǎn)品圖片才逐漸加載.
以下是實現(xiàn)代碼(基于jquery):
function lazyload(option){
var settings={
defObj:null,
defHeight:0
};
settings=$.extend(settings,option||{});
var defHeight=settings.defHeight,defObj=(typeof settings.defObj=="object")?settings.defObj.find("img"):$(settings.defObj).find("img");
var pageTop=function(){
return document.documentElement.clientHeight+Math.max(document.documentElement.scrollTop,document.body.scrollTop)-settings.defHeight;
};
var imgLoad=function(){
defObj.each(function(){
if ($(this).offset().top<=pageTop()){
var src2=$(this).attr("src2");
if (src2){
$(this).attr("src",src2).removeAttr("src2");
}
}
});
};
imgLoad();
// 綁定滾動事件
$(window).bind("scroll",function(){
imgLoad();
});
}
lazyload({
defObj:"#plist"
})
復(fù)制代碼 代碼如下:
function lazyload(option){
var settings={
defObj:null,
defHeight:0
};
settings=$.extend(settings,option||{});
var defHeight=settings.defHeight,defObj=(typeof settings.defObj=="object")?settings.defObj.find("img"):$(settings.defObj).find("img");
var pageTop=function(){
return document.documentElement.clientHeight+Math.max(document.documentElement.scrollTop,document.body.scrollTop)-settings.defHeight;
};
var imgLoad=function(){
defObj.each(function(){
if ($(this).offset().top<=pageTop()){
var src2=$(this).attr("src2");
if (src2){
$(this).attr("src",src2).removeAttr("src2");
}
}
});
};
imgLoad();
// 綁定滾動事件
$(window).bind("scroll",function(){
imgLoad();
});
}
lazyload({
defObj:"#plist"
})
您可能感興趣的文章:
- 快速實現(xiàn)JS圖片懶加載(可視區(qū)域加載)示例代碼
- JavaScript實現(xiàn)圖片懶加載(Lazyload)
- 基于javascript實現(xiàn)圖片懶加載
- 深入研究jQuery圖片懶加載 lazyload.js使用方法
- js前端實現(xiàn)圖片懶加載(lazyload)的兩種方式
- JS實現(xiàn)頁面數(shù)據(jù)懶加載
- JS實現(xiàn)圖片預(yù)加載無需等待
- javascript 事件加載與預(yù)加載
- js 實現(xiàn)圖片預(yù)加載(js操作 Image對象屬性complete ,事件onload 異步加載圖片)
- javascript實現(xiàn)圖片預(yù)加載和懶加載
相關(guān)文章
關(guān)于jquery form表單序列化的注意事項詳解
這篇文章主要給大家介紹了關(guān)于jquery form表單序列化的注意事項,文中通過示例代碼介紹的非常詳細,對大家具有一定的參考學(xué)習(xí)價值,需要的朋友們下面跟著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-08-08jQuery EasyUI 右鍵菜單--關(guān)閉標簽/選項卡的簡單實例
下面小編就為大家?guī)硪黄猨Query EasyUI 右鍵菜單--關(guān)閉標簽/選項卡的簡單實例。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-10-10