(1) 图片距离文档顶部的高度: img.offsetTop
(2) 返回窗口文档显示区的高度: window.innerHeight
(3) 返回文档的可见高度：document.documentElement.clientHeight
(3) 滚动条滚动的高度: document.body.scrollTop || document.documentElement.scrollTop
加载图片的判断条件:
图片距离顶部的距离 < 浏览器滚动条滚动的高度 + 浏览器窗口的高度
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS懒加载</title>
<style>
img{
width: 1002px;
height: 300px;
display: block;
}
</style>
</head>
<body>
<div class="imgLazyload">
<img src="" data-src="photo_01.jpeg">
<img src="" data-src="photo_02.jpeg">
<img src="" data-src="photo_03.jpeg">
<img src="" data-src="photo_04.jpeg">
<img src="" data-src="photo_01.jpeg">
<img src="" data-src="photo_02.jpeg">
</div>
<script type="text/javascript">
var imgList = document.getElementsByTagName('img');
var n = 0;
window.onscroll = function() {
var seeHeight = document.documentElement.clientHeight;
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
for (var i = n; i < imgList.length; i++) {
if (imgList[i].offsetTop < seeHeight + scrollTop) {
if (imgList[i].getAttribute('src') == '') {
imgList[i].src = imgList[i].getAttribute('data-src');
}
n = i + 1;
console.log('n=' + n);
}
}
}
</script>
</body>
</html>
