原生javascript-图片滚动按需加载
2013-07-16 22:12
387 查看
图片滚动按需加载:在某个区域的图片(自定义的范围,一般是首屏以下的区域),拉动滚动,图片出现在可视范围才开始加载,目的是减少请求,减耗宽带,提高首屏的呈现速度,让用户第一时间看到网页内容,留下美好的第一印象。
讲解:
(一)需要按需加载的img标签,图片的真实地址保存到自定义的属性里,如'data-src',那么src属性用一张1像素透明的图片
(二)把某范围内的img标签元素保存到数组里面
(三)定义一个方法:遍历数组元素,然后判断某元素的offsetTop是否在滚动的可视范围,如果在,交换图片的属性('data-src','src'),然后删除这个元素,那么在下次遍历就不存在
(四)给window对象,scroll与resize 添加此事件
(五)用户有可能快速拉滚动条,这样会导致事件的频繁触发,所以需要添加个setTimeout
完整代码:
讲解:
(一)需要按需加载的img标签,图片的真实地址保存到自定义的属性里,如'data-src',那么src属性用一张1像素透明的图片
(二)把某范围内的img标签元素保存到数组里面
(三)定义一个方法:遍历数组元素,然后判断某元素的offsetTop是否在滚动的可视范围,如果在,交换图片的属性('data-src','src'),然后删除这个元素,那么在下次遍历就不存在
load:function(){ // 全部加装,解除事件 if(this.imgList.length == 0){ this.removeHandler(window,'scroll',this.fnLoad); this.removeHandler(window,'resize',this.fnLoad); return } var st = document.body.scrollTop || document.documentElement.scrollTop, clientH = document.documentElement.clientHeight, scrollArea = st + clientH; for(var n=0;n<this.imgList.length;n++){ var offsetTop = this.imgList .getBoundingClientRect().top+st, imgH = this.imgList .clientHeight; if( scrollArea>(offsetTop-200)&&(imgH+offsetTop)>st ){ var _src = this.imgList .getAttribute(this.holderSrc); this.imgList .setAttribute('src',_src); this.imgList.splice(n,1);//删除已经加载完的元素 n--; } } }
(四)给window对象,scroll与resize 添加此事件
(五)用户有可能快速拉滚动条,这样会导致事件的频繁触发,所以需要添加个setTimeout
bind:function(obj,fn){ var _this = this; return function(){ if(_this.timer) clearTimeout(_this.timer); _this.timer = setTimeout(function(){ fn.apply(obj,arguments); },300); } }
完整代码:
function LazyScroll(opt){
this.init(opt);
}
LazyScroll.prototype = {
init:function(opt){
this.setOptions(opt);
this.load();
this.fnLoad = this.bind(this,this.load);
this.addHandler(window,'scroll',this.fnLoad);
this.addHandler(window,'resize',this.fnLoad);
},
setOptions:function(opt){
this.holderSrc = opt.holderSrc || 'data-src';
this.wrapId = opt.wrapId;
this.imgList = [];
this.timer = null;
var targets = null;
if (document.querySelectorAll) {
targets = document.querySelectorAll("#" + this.wrapId + " img")
} else {
targets = document.getElementById(this.wrapId).getElementsByTagName("img")
}
var n = 0,
len = targets.length;
// 把元素存到数组里
for(;n<len;n++){
if(targets
.getAttribute(this.holderSrc)){
this.imgList.push(targets
);
}
}
},
load:function(){ // 全部加装,解除事件 if(this.imgList.length == 0){ this.removeHandler(window,'scroll',this.fnLoad); this.removeHandler(window,'resize',this.fnLoad); return } var st = document.body.scrollTop || document.documentElement.scrollTop, clientH = document.documentElement.clientHeight, scrollArea = st + clientH; for(var n=0;n<this.imgList.length;n++){ var offsetTop = this.imgList .getBoundingClientRect().top+st, imgH = this.imgList .clientHeight; if( scrollArea>(offsetTop-200)&&(imgH+offsetTop)>st ){ var _src = this.imgList .getAttribute(this.holderSrc); this.imgList .setAttribute('src',_src); this.imgList.splice(n,1);//删除已经加载完的元素 n--; } } },
bind:function(obj,fn){ var _this = this; return function(){ if(_this.timer) clearTimeout(_this.timer); _this.timer = setTimeout(function(){ fn.apply(obj,arguments); },300); } },
addHandler:function(node,type,fn){
if(node.addEventListener){
node.addEventListener(type,fn,false);
}
else{
node.attachEvent('on'+type,function(){
fn.apply(node,arguments);
});
}
},
removeHandler: function(node, type, fn) {
if (node.addEventListener) {
node.removeEventListener(type, fn, false);
} else {
node.detachEvent("on" + type, fn);
}
}
}
<body id="body"> <img src="xxxx" width="990" height="90" data-src="http://dummyimage.com/990x90/333/fff" alt=""> <img src="xxxx" width="990" height="90" data-src="http://dummyimage.com/990x90/f60/fff" alt=""> <img src="xxxx" width="990" height="90" data-src="http://dummyimage.com/990x90/259/fff" alt=""> <img src="xxxx" width="990" height="90" data-src="http://dummyimage.com/990x90/999/fff" alt=""> <img src="xxxx" width="990" height="90" data-src="http://dummyimage.com/990x90/4D3434/fff" alt=""> <img src="xxxx" width="990" height="90" data-src="http://dummyimage.com/990x90/344D3C/fff" alt=""> <script type="text/javascript" src="scrollLazy.js"></script> <script type="text/javascript"> new LazyScroll({'wrapId':'body'}); </script> </body>
相关文章推荐
- 原生javascript实现图片滚动、延时加载功能
- 原生javascript实现图片滚动、延时加载功能
- 原生javascript-图片滚动按需加载
- javascript图片按需加载(滚动加载)的实现
- 原生js页面滚动延迟加载图片
- 原生javascript实现图片无缝滚动效果
- 原生javaScript实现图片延时加载的方法
- [转]JavaScript实现 页面滚动图片加载
- 解析javascript瀑布流原理实现图片滚动加载
- JavaScript仿淘宝页面图片滚动加载及刷新回顶部的方法解析
- JavaScript实现 页面滚动图片加载
- 原生javascript移动端滚动到底部加载更多数据效果代码
- 原生js页面滚动延迟加载图片
- javascript 图片 滚动加载
- 原生JavaScript Demo之图片滚动轮播
- JavaScript实现页面滚动图片加载(仿lazyload效果)
- 原生Js页面滚动延迟加载图片
- 原生javascript图片懒加载效果代码。