图片懒加载原理-实例四：首屏加载
用于实际项目中，后期再次发现一个不足之处：
1、有的用户会在页面打开时，突然拉到中间某个位置，应该使用首屏加载方式。
2、需要使用前面说的添加节点的方式：<div class="imgWrap" data-src="../images/1.jpg"></div> 已经加载的图片，其从arrImgBox中删除，当然需要将arrImgBox提前转化成数组；
3、所以，应该采取首屏加载来处理，查看最终效果，可以打开查看元素来，检测是否达到了首屏加载的目的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.imgbox {
width: 100%;
min-height: 300px;
margin: 20px 0;
border: 1px solid red;
}
.imgbox img {
width: 100%;
}
input{
position:fixed;
width:80px;
top:5px;
z-index: 10;
}
.input1{
left:5px;
}
.input2{
left:100px;
}
.input3{
left:190px;
}
</style>
</head>
<body>
<input class="input1" type="button" value="throttle">
<input class="input2" type="button" value="debounce">
<input class="input3" type="button" value="immediate">
<div class="imgbox" data-src="http://pic.58pic.com/58pic/17/18/97/01U58PIC4Xr_1024.jpg"></div>
<div class="imgbox" data-src="http://cover.read.duokan.com/mfsv2/download/fdsc3/p01N203pHTU7/Wr5314kcLAtVCi.jpg!t"></div>
<div class="imgbox" data-src="http://77fkxu.com1.z0.glb.clouddn.com/20160308/1457402219_73571.jpg"></div>
<div class="imgbox" data-src="http://cover.read.duokan.com/mfsv2/download/fdsc3/p01a3SXHo2hZ/XYAC5TLk4uYWXn.jpg!t"></div>
<div class="imgbox" data-src="http://pic1.cxtuku.com/00/16/18/b3809a2ba0f3.jpg"></div>
<div class="imgbox" data-src="http://img.bitscn.com/upimg/allimg/c150708/14363B06253120-6060O.jpg"></div>
<div class="imgbox" data-src="http://pic.58pic.com/58pic/17/18/97/01U58PIC4Xr_1024.jpg"></div>
<div class="imgbox" data-src="http://cover.read.duokan.com/mfsv2/download/fdsc3/p015trgKM7vw/H0iyDPPneOVrA4.jpg!t"></div>
<div class="imgbox" data-src="http://77fkxu.com1.z0.glb.clouddn.com/20160308/1457402219_73571.jpg"></div>
<div class="imgbox" data-src="http://imgsrc.baidu.com/baike/pic/item/2f9cbdcc5e0bcf5c00e9283b.jpg"></div>
<div class="imgbox" data-src="http://pic1.cxtuku.com/00/16/18/b3809a2ba0f3.jpg"></div>
<div class="imgbox" data-src="http://img.bitscn.com/upimg/allimg/c150708/14363B06253120-6060O.jpg"></div>
<div class="imgbox" data-src="http://pic.58pic.com/58pic/17/18/97/01U58PIC4Xr_1024.jpg"></div>
<div class="imgbox" data-src="http://cover.read.duokan.com/mfsv2/download/fdsc3/p015trgKM7vw/H0iyDPPneOVrA4.jpg!t"></div>
<div class="imgbox" data-src="http://77fkxu.com1.z0.glb.clouddn.com/20160308/1457402219_73571.jpg"></div>
<div class="imgbox" data-src="http://imgsrc.baidu.com/baike/pic/item/2f9cbdcc5e0bcf5c00e9283b.jpg"></div>
<div class="imgbox" data-src="http://pic1.cxtuku.com/00/16/18/b3809a2ba0f3.jpg"></div>
<div class="imgbox" data-src="http://img.bitscn.com/upimg/allimg/c150708/14363B06253120-6060O.jpg"></div>
<div class="imgbox" data-src="http://pic.58pic.com/58pic/17/18/97/01U58PIC4Xr_1024.jpg"></div>
<div class="imgbox" data-src="http://cover.read.duokan.com/mfsv2/download/fdsc3/p015trgKM7vw/H0iyDPPneOVrA4.jpg!t"></div>
<div class="imgbox" data-src="http://77fkxu.com1.z0.glb.clouddn.com/20160308/1457402219_73571.jpg"></div>
<div class="imgbox" data-src="http://imgsrc.baidu.com/baike/pic/item/2f9cbdcc5e0bcf5c00e9283b.jpg"></div>
<div class="imgbox" data-src="http://pic1.cxtuku.com/00/16/18/b3809a2ba0f3.jpg"></div>
<div class="imgbox" data-src="http://img.bitscn.com/upimg/allimg/c150708/14363B06253120-6060O.jpg"></div>
<div class="imgbox" data-src="http://pic.58pic.com/58pic/17/18/97/01U58PIC4Xr_1024.jpg"></div>
<div class="imgbox" data-src="http://cover.read.duokan.com/mfsv2/download/fdsc3/p015trgKM7vw/H0iyDPPneOVrA4.jpg!t"></div>
<div class="imgbox" data-src="http://77fkxu.com1.z0.glb.clouddn.com/20160308/1457402219_73571.jpg"></div>
<div class="imgbox" data-src="http://imgsrc.baidu.com/baike/pic/item/2f9cbdcc5e0bcf5c00e9283b.jpg"></div>
<div class="imgbox" data-src="http://pic1.cxtuku.com/00/16/18/b3809a2ba0f3.jpg"></div>
<div class="imgbox" data-src="http://img.bitscn.com/upimg/allimg/c150708/14363B06253120-6060O.jpg"></div>
<div class="imgbox" data-src="http://pic.58pic.com/58pic/17/18/97/01U58PIC4Xr_1024.jpg"></div>
<div class="imgbox" style="position:relative" data-src="http://cover.read.duokan.com/mfsv2/download/fdsc3/p015trgKM7vw/H0iyDPPneOVrA4.jpg!t"></div>
<div class="imgbox" style="position:relative" data-src="http://77fkxu.com1.z0.glb.clouddn.com/20160308/1457402219_73571.jpg"></div>
<div class="imgbox" style="position:relative" data-src="http://imgsrc.baidu.com/baike/pic/item/2f9cbdcc5e0bcf5c00e9283b.jpg"></div>
<div class="imgbox" style="position:relative" data-src="http://pic1.cxtuku.com/00/16/18/b3809a2ba0f3.jpg"></div>
<div class="imgbox" style="position:relative" data-src="http://img.bitscn.com/upimg/allimg/c150708/14363B06253120-6060O.jpg"></div>
</body>
<script>
var imgBox=document.getElementsByClassName('imgbox'),
arrImgBox=Array.prototype.slice.call(imgBox);
function getTop(obj) {
var h = 0;
while (obj) {
h += obj.offsetTop;
obj = obj.offsetParent;
}
return h;
}
function setSrc(wrapNode) {
var img=document.createElement('img'),
src;
if (wrapNode.dataset) {
src=wrapNode.dataset.src;
} else {
src=wrapNode.getAttribute('data-src');
}
img.src=src;
wrapNode.appendChild(img);
}
function lazyLoad() {
console.log(arrImgBox.length);
if (arrImgBox.length==0) return;
var scrollTopBottom =document.documentElement.clientHeight + (document.documentElement.scrollTop || document.body.scrollTop),
scrollTopTop =document.documentElement.scrollTop || document.body.scrollTop,
imgBottom,
imgTop;
for (var i = 0; i < arrImgBox.length; i++) {
imgTop=getTop(arrImgBox[i]);
imgBottom=imgTop+arrImgBox[i].offsetHeight;
if ( imgBottom <= scrollTopTop || imgTop >= scrollTopBottom ) {
continue;
} else {
setSrc(arrImgBox[i]);
arrImgBox.splice(i, 1);
}
}
}
function rateControl(argus) {
var delay=argus.delay || 500,
callback=argus.callback || function () {},
type=argus.type || 'throttle',
safe=true,
timer = null,
context,
args,
startTime=+new Date(),
curTime;
function throttle(){
context = this;
args = arguments;
curTime = +new Date();
clearTimeout(timer);
if (curTime - startTime >= delay) {
callback.apply(context, args);
startTime = curTime;
} else {
timer = setTimeout(function() {
callback.apply(context, args);
}, delay);
}
}
function debounce() {
context = this;
args = arguments;
clearTimeout(timer);
timer = setTimeout(function() {
callback.apply(context, args);
}, delay);
}
function immediate() {
if (safe) {
callback();
safe = false;
}
clearTimeout(timer);
timer = setTimeout(function() {
safe = true;
}, delay);
}
switch (type) {
case 'throttle':
return throttle;
case 'debounce':
return debounce;
case 'immediate':
return immediate;
}
}
window.onscroll = rateControl({callback:lazyLoad});
window.onload=function () {
// window.onscroll();
var btn=document.getElementsByTagName('input');
btn[0].onclick=function () {
window.onscroll = rateControl({
callback:lazyLoad,
delay:1000,
type:'throttle'
});
};
btn[1].onclick=function () {
window.onscroll = rateControl({
callback:lazyLoad,
delay:1000,
type:'debounce'
});
};
btn[2].onclick=function () {
window.onscroll = rateControl({
callback:lazyLoad,
delay:1000,
type:'immediate'
});
};
}
</script>
</html>
