基于jquery的圖片懶加載js
更新時(shí)間：2010年06月30日 12:26:48 作者：
在京東商城瀏覽時(shí), 會(huì)發(fā)現(xiàn)產(chǎn)品圖片只顯示了一屏, 當(dāng)頁(yè)面向下滾動(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)頁(yè)面數(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)文章
EasyUI的treegrid組件動(dòng)態(tài)加載數(shù)據(jù)問題的解決辦法
最近涉及到treegrid組件的查詢，需要根據(jù)查詢條件動(dòng)態(tài)更新EasyUI的treegrid組件的動(dòng)態(tài)加載查詢結(jié)果2011-12-12
用Radio來實(shí)現(xiàn)用戶的選擇效果，在項(xiàng)目中積累了一些利用JQUERY來操作Radio的方法，這里與大家分享下2014-10-10
深入淺析ng-bootstrap 組件集中 tabset 組件的實(shí)現(xiàn)分析
這篇文章主要介紹了ng-bootstrap 組件集中 tabset 組件的實(shí)現(xiàn)分析 ,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-07-07
CSS+jQuery實(shí)現(xiàn)的一個(gè)放大縮小動(dòng)畫效果
因?yàn)樾枨缶椭挥?個(gè)元素。如果是要用CSS的class來處理，那就需要用到CSS3動(dòng)畫了，好了下面為大家介紹下如何實(shí)現(xiàn)這個(gè)放大縮小動(dòng)畫效果2013-09-09
jQuery 實(shí)現(xiàn)鼠標(biāo)畫框并對(duì)框內(nèi)數(shù)據(jù)選中的實(shí)例代碼
本文通過實(shí)例代碼給大家介紹了jQuery 實(shí)現(xiàn)鼠標(biāo)畫框并對(duì)框內(nèi)數(shù)據(jù)選中的實(shí)例代碼，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧2017-08-08
EasyUI修改DateBox和DateTimeBox的默認(rèn)日期格式示例
本篇文章主要介紹了EasyUI修改DateBox和DateTimeBox的默認(rèn)日期格式示例，具有一定的參考價(jià)值，有興趣的可以了解一下。2017-01-01
這篇文章主要為大家詳細(xì)介紹了Jquery UI 模仿淘寶搜索下拉列表功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-01-01
jQuery對(duì)話框插件ArtDialog在雙擊遮罩層時(shí)出現(xiàn)關(guān)閉現(xiàn)象的解決方法
這篇文章主要介紹了jQuery對(duì)話框插件ArtDialog在雙擊遮罩層時(shí)出現(xiàn)關(guān)閉現(xiàn)象的解決方法,涉及針對(duì)插件源碼的修改,需要的朋友可以參考下2016-08-08
如今jQuery在網(wǎng)站上普及的程度越來越高，所以，對(duì)于jQuery的使用，即使再小的一點(diǎn)認(rèn)識(shí)、一點(diǎn)優(yōu)勢(shì)、一點(diǎn)不足，也顯得越來越值得研究和探討2012-06-06
jQuery實(shí)現(xiàn)HTML元素隱藏和顯示
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)HTML元素隱藏和顯示，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08