图片懒加载
2017-11-15 本文已影响0人
小漠穷秋
涉及知识：
1.防抖思想
2.this指针
3.元素位置计算
讲解：
1.见文集
2.见文集
3.元素位置：
可以见如下经典图
image.png
image.png
源代码：
<!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="" data-src="http://img5.imgtn.bdimg.com/it/u=2033765348,1346395611&fm=206&gp=0.jpg" /></div>
<div><img src="" data-src="http://img5.imgtn.bdimg.com/it/u=2033765348,1346395611&fm=206&gp=0.jpg" /></div>
<div><img src="" data-src="http://img5.imgtn.bdimg.com/it/u=2033765348,1346395611&fm=206&gp=0.jpg" /></div>
<div><img src="" data-src="http://img5.imgtn.bdimg.com/it/u=2033765348,1346395611&fm=206&gp=0.jpg" /></div>
<div><img src="" data-src="http://img5.imgtn.bdimg.com/it/u=2033765348,1346395611&fm=206&gp=0.jpg" /></div>
<div><img src="" data-src="http://img5.imgtn.bdimg.com/it/u=2033765348,1346395611&fm=206&gp=0.jpg" /></div>
<div><img src="" data-src="http://img5.imgtn.bdimg.com/it/u=2033765348,1346395611&fm=206&gp=0.jpg" /></div>
<div><img src="" data-src="http://img5.imgtn.bdimg.com/it/u=2033765348,1346395611&fm=206&gp=0.jpg" /></div>
<div><img src="" data-src="http://img5.imgtn.bdimg.com/it/u=2033765348,1346395611&fm=206&gp=0.jpg" /></div>
<div><img src="" data-src="http://img5.imgtn.bdimg.com/it/u=2033765348,1346395611&fm=206&gp=0.jpg" /></div>
<div><img src="" data-src="http://img5.imgtn.bdimg.com/it/u=2033765348,1346395611&fm=206&gp=0.jpg" /></div>
<div><img src="" data-src="http://img5.imgtn.bdimg.com/it/u=2033765348,1346395611&fm=206&gp=0.jpg" /></div>
<div><img src="" data-src="http://img5.imgtn.bdimg.com/it/u=2033765348,1346395611&fm=206&gp=0.jpg" /></div>
<div><img src="" data-src="http://img5.imgtn.bdimg.com/it/u=2033765348,1346395611&fm=206&gp=0.jpg" /></div>
<div><img src="" data-src="http://img5.imgtn.bdimg.com/it/u=2033765348,1346395611&fm=206&gp=0.jpg" /></div>
<div><img src="" data-src="http://img5.imgtn.bdimg.com/it/u=2033765348,1346395611&fm=206&gp=0.jpg" /></div>
<div><img src="" data-src="http://img5.imgtn.bdimg.com/it/u=2033765348,1346395611&fm=206&gp=0.jpg" /></div>
<div><img src="" data-src="http://img5.imgtn.bdimg.com/it/u=2033765348,1346395611&fm=206&gp=0.jpg" /></div>
<div><img src="" data-src="http://img5.imgtn.bdimg.com/it/u=2033765348,1346395611&fm=206&gp=0.jpg" /></div>
<div><img src="" data-src="http://img5.imgtn.bdimg.com/it/u=2033765348,1346395611&fm=206&gp=0.jpg" /></div>
<div><img src="" data-src="http://img5.imgtn.bdimg.com/it/u=2033765348,1346395611&fm=206&gp=0.jpg" /></div>
<div><img src="" data-src="http://img5.imgtn.bdimg.com/it/u=2033765348,1346395611&fm=206&gp=0.jpg" /></div>
<div><img src="" data-src="http://img5.imgtn.bdimg.com/it/u=2033765348,1346395611&fm=206&gp=0.jpg" /></div>
<div><img src="" data-src="http://img5.imgtn.bdimg.com/it/u=2033765348,1346395611&fm=206&gp=0.jpg" /></div>
<div><img src="" data-src="http://img5.imgtn.bdimg.com/it/u=2033765348,1346395611&fm=206&gp=0.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>
</body>
<script type="text/javascript">
window.onload = function() {
new LazyLoad('con');
}
function LazyLoad(id) {
this.container = document.getElementById(id);
this.imgs = this.getImages();
this.init();
}
LazyLoad.prototype = {
init: function(){
this.update(this);
this.bindEvent();
},
debounce: function(fn,timer) {
var timeout = null;
return function() {
if (timeout != null) {
clearTimeout(timeout);
}
timeout = setTimeout(fn.bind(this),timer);//wettimeout让this指向了window,通过bind绑定到当前对象
}
},
getImages: function(){
var imgs = [];
var images = this.container.getElementsByTagName('img');
for(var i = 0; i < images.length; i++) {
imgs.push(images[i]);
}
return imgs;
},
bindEvent: function(){
this.on(window,'scroll',this.debounce(this.update,5000),this);
this.on(window,'resize',this.debounce(this.update,5000),this);
},
update:function(){
if(!this.imgs.length) return;
var length = this.imgs.length;
for(i=length-1;i>=0;i--) {
if (this.isShow(this.imgs[i])) {
this.imgs[i].src = this.imgs[i].getAttribute("data-src");
this.imgs.splice(i,1);
}
}
},
isShow:function(img){
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
var scrollBottom = document.documentElement.clientHeight + scrollTop;
var imgTop = this.pageY(img) ;
console.log(img);
var imgBottom = imgTop + img.offsetHeight;
if (imgTop > scrollTop && imgTop < scrollBottom || imgBottom < scrollBottom && imgBottom > scrollTop ) {
return true;
}
else{
return false;
}
},
on:function(ele,event,fn,context){
if(ele.addEventListener) {
ele.addEventListener(event,fn.bind(context));//这里addeventlistener之后this指针指向了window
}
else{
ele.attachEvent("on"+event,fn.bind(context));
}
},
pageY:function(ele){
if (ele.offsetParent) {
return ele.offsetTop + this.pageY(ele.offsetParent);
}
else {
return ele.offsetTop;
}
}
}
</script>
</html>
