基于jquery的圖片懶加載js
更新時(shí)間:2010年06月30日 12:26:48 作者:
在京東商城瀏覽時(shí), 會(huì)發(fā)現(xiàn)產(chǎn)品圖片只顯示了一屏, 當(dāng)頁面向下滾動(dòng)時(shí)下面的產(chǎn)品圖片才逐漸加載.
以下是實(shí)現(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();
// 綁定滾動(dòng)事件
$(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();
// 綁定滾動(dòng)事件
$(window).bind("scroll",function(){
imgLoad();
});
}
lazyload({
defObj:"#plist"
})
您可能感興趣的文章:
- 快速實(shí)現(xiàn)JS圖片懶加載(可視區(qū)域加載)示例代碼
- JavaScript實(shí)現(xiàn)圖片懶加載(Lazyload)
- 基于javascript實(shí)現(xiàn)圖片懶加載
- 深入研究jQuery圖片懶加載 lazyload.js使用方法
- js前端實(shí)現(xiàn)圖片懶加載(lazyload)的兩種方式
- JS實(shí)現(xiàn)頁面數(shù)據(jù)懶加載
- JS實(shí)現(xiàn)圖片預(yù)加載無需等待
- javascript 事件加載與預(yù)加載
- js 實(shí)現(xiàn)圖片預(yù)加載(js操作 Image對(duì)象屬性complete ,事件onload 異步加載圖片)
- javascript實(shí)現(xiàn)圖片預(yù)加載和懶加載
相關(guān)文章
jQuery多級(jí)手風(fēng)琴菜單實(shí)例講解
這篇文章主要介紹了jQuery實(shí)現(xiàn)多級(jí)手風(fēng)琴菜單,菜單效果更有特色,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2015-10-10關(guān)于jquery form表單序列化的注意事項(xiàng)詳解
這篇文章主要給大家介紹了關(guān)于jquery form表單序列化的注意事項(xiàng),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面跟著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-08-08Jquery 最近瀏覽過的商品的功能實(shí)現(xiàn)代碼
Jquery 最近瀏覽過的商品的功能實(shí)現(xiàn)代碼,需要的朋友可以參考下。2010-05-05jQuery實(shí)現(xiàn)向下滑出的二級(jí)菜單效果實(shí)例
這篇文章主要介紹了jQuery實(shí)現(xiàn)向下滑出的二級(jí)菜單效果,涉及jquery鼠標(biāo)事件及頁面元素樣式動(dòng)態(tài)變換的相關(guān)技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-08-08jQuery EasyUI 右鍵菜單--關(guān)閉標(biāo)簽/選項(xiàng)卡的簡單實(shí)例
下面小編就為大家?guī)硪黄猨Query EasyUI 右鍵菜單--關(guān)閉標(biāo)簽/選項(xiàng)卡的簡單實(shí)例。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-10-10jquery插件corner實(shí)現(xiàn)圓角邊框的方法
這篇文章主要介紹了jquery插件corner實(shí)現(xiàn)圓角邊框的方法,實(shí)例分析了jQuery插件corner的使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03