整合前面的一些问题，还发现一些不足：
1、当滚动太快突然停止时，后面的图片不加载这更加类似immediate了，需要改进
2、用到了setTimeout，应该保证this的原有指向不变
3、节流函数用处较多，应该将它独立出来
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.imgbox {
width: 100%;
min-height: 150px;
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"><img data-src="http://pic.58pic.com/58pic/17/18/97/01U58PIC4Xr_1024.jpg"/></div>
<div class="imgbox"><img data-src="http://cover.read.duokan.com/mfsv2/download/fdsc3/p01N203pHTU7/Wr5314kcLAtVCi.jpg!t"/></div>
<div class="imgbox"><img data-src="http://77fkxu.com1.z0.glb.clouddn.com/20160308/1457402219_73571.jpg"/></div>
<div class="imgbox"><img data-src="http://cover.read.duokan.com/mfsv2/download/fdsc3/p01a3SXHo2hZ/XYAC5TLk4uYWXn.jpg!t"/></div>
<div class="imgbox"><img data-src="http://pic1.cxtuku.com/00/16/18/b3809a2ba0f3.jpg"/></div>
<div class="imgbox"><img data-src="http://img.bitscn.com/upimg/allimg/c150708/14363B06253120-6060O.jpg"/></div>
<div class="imgbox"><img data-src="http://pic.58pic.com/58pic/17/18/97/01U58PIC4Xr_1024.jpg"/></div>
<div class="imgbox"><img data-src="http://cover.read.duokan.com/mfsv2/download/fdsc3/p015trgKM7vw/H0iyDPPneOVrA4.jpg!t"/></div>
<div class="imgbox"><img data-src="http://77fkxu.com1.z0.glb.clouddn.com/20160308/1457402219_73571.jpg"/></div>
<div class="imgbox"><img data-src="http://imgsrc.baidu.com/baike/pic/item/2f9cbdcc5e0bcf5c00e9283b.jpg"/></div>
<div class="imgbox"><img data-src="http://pic1.cxtuku.com/00/16/18/b3809a2ba0f3.jpg"/></div>
<div class="imgbox"><img data-src="http://img.bitscn.com/upimg/allimg/c150708/14363B06253120-6060O.jpg"/></div>
<div class="imgbox"><img data-src="http://pic.58pic.com/58pic/17/18/97/01U58PIC4Xr_1024.jpg"/></div>
<div class="imgbox"><img data-src="http://cover.read.duokan.com/mfsv2/download/fdsc3/p015trgKM7vw/H0iyDPPneOVrA4.jpg!t"/></div>
<div class="imgbox"><img data-src="http://77fkxu.com1.z0.glb.clouddn.com/20160308/1457402219_73571.jpg"/></div>
<div class="imgbox"><img data-src="http://imgsrc.baidu.com/baike/pic/item/2f9cbdcc5e0bcf5c00e9283b.jpg"/></div>
<div class="imgbox"><img data-src="http://pic1.cxtuku.com/00/16/18/b3809a2ba0f3.jpg"/></div>
<div class="imgbox"><img data-src="http://img.bitscn.com/upimg/allimg/c150708/14363B06253120-6060O.jpg"/></div>
<div class="imgbox"><img data-src="http://pic.58pic.com/58pic/17/18/97/01U58PIC4Xr_1024.jpg"/></div>
<div class="imgbox"><img data-src="http://cover.read.duokan.com/mfsv2/download/fdsc3/p015trgKM7vw/H0iyDPPneOVrA4.jpg!t"/></div>
<div class="imgbox"><img data-src="http://77fkxu.com1.z0.glb.clouddn.com/20160308/1457402219_73571.jpg"/></div>
<div class="imgbox"><img data-src="http://imgsrc.baidu.com/baike/pic/item/2f9cbdcc5e0bcf5c00e9283b.jpg"/></div>
<div class="imgbox"><img data-src="http://pic1.cxtuku.com/00/16/18/b3809a2ba0f3.jpg"/></div>
<div class="imgbox"><img data-src="http://img.bitscn.com/upimg/allimg/c150708/14363B06253120-6060O.jpg"/></div>
<div class="imgbox"><img data-src="http://pic.58pic.com/58pic/17/18/97/01U58PIC4Xr_1024.jpg"/></div>
<div class="imgbox"><img data-src="http://cover.read.duokan.com/mfsv2/download/fdsc3/p015trgKM7vw/H0iyDPPneOVrA4.jpg!t"/></div>
<div class="imgbox"><img data-src="http://77fkxu.com1.z0.glb.clouddn.com/20160308/1457402219_73571.jpg"/></div>
<div class="imgbox"><img data-src="http://imgsrc.baidu.com/baike/pic/item/2f9cbdcc5e0bcf5c00e9283b.jpg"/></div>
<div class="imgbox"><img data-src="http://pic1.cxtuku.com/00/16/18/b3809a2ba0f3.jpg"/></div>
<div class="imgbox"><img data-src="http://img.bitscn.com/upimg/allimg/c150708/14363B06253120-6060O.jpg"/></div>
<div class="imgbox"><img data-src="http://pic.58pic.com/58pic/17/18/97/01U58PIC4Xr_1024.jpg"/></div>
<div class="imgbox" style="position:relative"><img data-src="http://cover.read.duokan.com/mfsv2/download/fdsc3/p015trgKM7vw/H0iyDPPneOVrA4.jpg!t"/></div>
<div class="imgbox" style="position:relative"><img data-src="http://77fkxu.com1.z0.glb.clouddn.com/20160308/1457402219_73571.jpg"/></div>
<div class="imgbox" style="position:relative"><img data-src="http://imgsrc.baidu.com/baike/pic/item/2f9cbdcc5e0bcf5c00e9283b.jpg"/></div>
<div class="imgbox" style="position:relative"><img data-src="http://pic1.cxtuku.com/00/16/18/b3809a2ba0f3.jpg"/></div>
<div class="imgbox" style="position:relative"><img data-src="http://img.bitscn.com/upimg/allimg/c150708/14363B06253120-6060O.jpg"/></div>
</body>
<script>
var img = document.getElementsByTagName('img'),
n=0;
function getTop(obj) {
var h = 0;
while (obj) {
h += obj.offsetTop;
obj = obj.offsetParent;
}
return h;
}
function setSrc(imgNode) {
var src='';
if (imgNode.dataset) {
src=imgNode.dataset.src;
} else {
src=imgNode.getAttribute('data-src');
}
imgNode.src=src;
}
function lazyLoad() {
var top =document.documentElement.clientHeight + (document.documentElement.scrollTop || document.body.scrollTop);
for (var i = n; i < img.length; i++) {
console.log(top);
if (getTop(img[i]) < top) {
setSrc(img[i]);
n=i;
}
}
}
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>