设计模式（节流模式-----图片懒加载）
昨天把节流模式写了下，今天来个节流模式的应用----图片懒加载（图片延迟加载）
废话不多说，直接懒加载代码吧！哈哈
1 //创建懒加载对象 @id是将要获取外部容器的id
var Lazyload = function(id) { 2 this.container = document.getElementById(id); 3 this.imgs = this.getImgs(); 4 this.init();//初始化 5 } 6 Lazyload.prototype = { 7 //初始化 8 init: function() { 9 this.update(); //进行首次图片位置判断 10 this.bindEvent(); //添加事件 11 }, 12 //获取图片数据 13 getImgs: function() { //获取到的图片对象放入数组中 14 var arr = []; 15 var imgs = this.container.getElementsByTagName('img'); 16 for(var i = 0, len = imgs.length; i < len; i++) { 17 arr.push(imgs[i]); 18 } 19 return arr; 20 }, 21 //对图片进行处理操作 22 update: function() { 23 if(!this.imgs.length) return; 24 var i = this.imgs.length; 25 for(i--; i >= 0; i--) { 26 if(this.shouldShow(i)) { 27 this.imgs[i].src = this.imgs[i].getAttribute("data-src"); 28 this.imgs.splice(i, 1);//获取后删除数组中的图片 29 } 30 } 31 }, 32 //判断图片位置 33 shouldShow: function(i) { 34 var img = this.imgs[i]; 35 scrollTop = document.documentElement.scrollTop || document.body.scrollTop;//滚动高度 36 scrollBottom = scrollTop + document.documentElement.clientHeight; //获取页面底部高度 37 imgTop = this.pageY(img); 38 imgBottom = imgTop + img.offsetHeight; 39 if((imgTop > scrollTop && imgTop < scrollBottom) || (imgBottom > scrollTop && imgBottom < scrollBottom)) { 40 41 return true; 42 } else { 43 return false; 44 } 45 }, 46 //获取图片距离页面顶部距离 47 pageY: function(ele) { 48 if(ele.offsetParent) { 49 return ele.offsetTop + this.pageY(ele.offsetParent); 50 } else { 51 return ele.offsetTop; 52 } 53 }, 54 //绑定事件 55 bindEvent: function() { 56 var that = this; 57 that.on(window, "scroll", function() { 58 //that.update(); 59 throttle(that.update, { 60 context: that 61 }) 62 }); 63 that.on(window, function() { 64 //that.update(); 65 throttle(that.update, { 66 context: that 67 }) 68 }) 69 }, 70 //监听 71 on: function(ele, type, fn) { 72 if(ele.addEventListener) { 73 ele.addEventListener(type, fn, false) 74 } else { 75 ele.attachEvent("on" + type, fn) 76 } 77 } 78 }
结果展示：
延迟前显示默认图片
延迟结果
完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#con div {
width: 300px;
height: 200px;
overflow: hidden;
margin: auto;
}
img {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="con">
<div><img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300×200&w=300&h=200" data-src="http://img5.imgtn.bdimg.com/it/u=2033765348,1346395611&fm=206&gp=0.jpg" /></div>
<div><img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300×200&w=300&h=200" data-src="http://img.pconline.com.cn/images/upload/upc/tx/wallpaper/1209/10/c1/13758581_1347257278695.jpg" /></div>
<div><img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300×200&w=300&h=200" data-src="http://img5.imgtn.bdimg.com/it/u=2033765348,1346395611&fm=206&gp=0.jpg" /></div>
<div><img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300×200&w=300&h=200" data-src="http://img5.imgtn.bdimg.com/it/u=2033765348,1346395611&fm=206&gp=0.jpg" /></div>
<div><img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300×200&w=300&h=200" data-src="http://pic32.nipic.com/20130814/13162234_111708002000_2.jpg" /></div>
<div><img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300×200&w=300&h=200" data-src="http://img5.imgtn.bdimg.com/it/u=3704303780,566844591&fm=206&gp=0.jpg" /></div>
<div><img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300×200&w=300&h=200" data-src="http://img5.imgtn.bdimg.com/it/u=2033765348,1346395611&fm=206&gp=0.jpg" /></div>
<div><img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300×200&w=300&h=200" data-src="http://www.bz55.com/uploads/allimg/141202/139-141202103039.jpg" /></div>
<div><img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300×200&w=300&h=200" data-src="http://img.pconline.com.cn/images/upload/upc/tx/wallpaper/1209/10/c1/13758581_1347257278695.jpg" /></div>
<div><img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300×200&w=300&h=200" data-src="http://pic32.nipic.com/20130814/13162234_111708002000_2.jpg" /></div>
</div>
<div style="height: 500px;background: red;position: relative;padding:1px;display: block;">
<div id="a" style="margin-top: 10px;background: yellow; height: 100px;"></div>
</div>
<script>
var extend = function(olds, news) {
for(var index in news) {
olds[index] = news[index];
}
return olds;
}
var throttle = function() {
var isClear = arguments[0],
fn;
if(typeof isClear === "boolean") {
fn = arguments[1];
fn.__throttleID && clearTimeout(fn.__throttleID);
} else {
fn = isClear;
param = arguments[1] || [];
var p = extend({
context: null,
args: [],
time: 300
}, param);
arguments.callee(true, fn);
fn.__throttleID = setTimeout(function() {
fn.apply(p.context, p.args)
}, p.time)
}
}
var Lazyload = function(id) {
this.container = document.getElementById(id);
this.imgs = this.getImgs();
this.init();
}
Lazyload.prototype = {
//初始化
init: function() {
this.update(); //进行首次图片位置判断
this.bindEvent(); //添加事件
},
//获取图片数据
getImgs: function() {
var arr = [];
var imgs = this.container.getElementsByTagName('img');
for(var i = 0, len = imgs.length; i < len; i++) {
arr.push(imgs[i]);
}
return arr;
},
//对图片进行处理操作
update: function() {
if(!this.imgs.length) return;
var i = this.imgs.length;
for(i--; i >= 0; i--) {
if(this.shouldShow(i)) {
this.imgs[i].src = this.imgs[i].getAttribute("data-src");
this.imgs.splice(i, 1);
}
}
},
//判断图片位置
shouldShow: function(i) {
var img = this.imgs[i];
scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
scrollBottom = scrollTop + document.documentElement.clientHeight;
imgTop = this.pageY(img);
imgBottom = imgTop + img.offsetHeight;
if((imgTop > scrollTop && imgTop < scrollBottom) || (imgBottom > scrollTop && imgBottom < scrollBottom)) {
return true;
} else {
return false;
}
},
//获取图片距离页面顶部距离
pageY: function(ele) {
if(ele.offsetParent) {
return ele.offsetTop + this.pageY(ele.offsetParent);
} else {
return ele.offsetTop;
}
},
//绑定事件
bindEvent: function() {
var that = this;
that.on(window, "scroll", function() {
//that.update();
throttle(that.update, {
context: that
})
});
that.on(window, function() {
//that.update();
throttle(that.update, {
context: that
})
})
},
//监听
on: function(ele, type, fn) {
if(ele.addEventListener) {
ele.addEventListener(type, fn, false)
} else {
ele.attachEvent("on" + type, fn)
}
}
}
window.onload = function() {
new Lazyload("con")
}
</script>
</body>
</html>
