昨天把节流模式写了下，今天来个节流模式的应用----图片懒加载（图片延迟加载）
废话不多说，直接懒加载代码吧！哈哈
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>
时间： 2024-12-13 03:53:46