原理
一开始将img标签的src设置为一张默认图片，将真实的图片地址放在data-src上，监听滚动事件，当图片进入可视区域时，写入src真实的图片地址。
如何判断图片进入了可视区域？
对于这样一个页面，图片即将进入页面的条件是：图片距离整个网页顶部的距离 < 浏览器可视区域的高度 + 滚动条滚动的距离。那么问题就可以分解成三个小点：
①图片距离整个网页顶部的距离；
可以通过下面这个方法获取某个元素到网页顶部的距离：
function getElementTop (element) {
let actualTop = element.offsetTop;
let parent = element.offsetParent;
while (parent !== null) {
actualTop += parent.offsetTop;
parent = parent.offsetParent;
}
return actualTop;
}
代码分析：
offsetTop表示的是元素距离父元素左上角顶点的高度，offsetParent则表示元素的父元素。通过不断遍历累加高度，就可以得到元素距离网页顶部的距离。
②浏览器可视区域的高度；
即window.innerHeight
③滚动条滚动的距离。
即document.documentElement.scrollTop
懒加载如何实现？
html代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="./lazyLoad.css">
</head>
<body>
<div class="wrapper">
<img src="./default.jpg" data-src="./dog0.jpg">
<img src="./default.jpg" data-src="./dog1.jpg">
<img src="./default.jpg" data-src="./dog2.jpg">
<img src="./default.jpg" data-src="./dog3.jpg">
<img src="./default.jpg" data-src="./dog4.jpg">
<img src="./default.jpg" data-src="./dog5.jpg">
<img src="./default.jpg" data-src="./dog6.jpg">
</div>
<script src="./lazyLoad.js"></script>
</body>
</html>
这里只需要注意到开始时img标签的src属性放的是默认的图片，真正的图片地址放在了data-src中
css代码如下：
.wrapper {
text-align: center;
}
img {
display: block;
margin: 10px auto;
}
js代码如下：
function lazyLoad () {
let images = document.querySelectorAll('img');
for(let i = 0; i < images.length; i++) {
let image = images[i];
if (getElementTop(image) <= window.innerHeight + document.documentElement.scrollTop) {
image.src = image.getAttribute('data-src');
}
}
}
function getElementTop (element) {
let actualTop = element.offsetTop;
let parent = element.offsetParent;
while (parent !== null) {
actualTop += parent.offsetTop;
parent = parent.offsetParent;
}
return actualTop;
}
lazyLoad()；
window.onscroll =lazyLoad；
代码分析：
window.onscroll = lazyload表示在滚动条滚动时触发调用lazyLoad方法；
在lazyLoad方法中，先通过document.querySelectorAll('img');找到所有的Image（这里只是为了简化示例，实际场景中可以通过在需要懒加载的图片上添加统一的类名，然后通过querySelectorAll('.类名')来获取需要懒加载的图片),依次判断是否进入了可视区域内。如果进入了可视区域则做img标签的src的替换。
需要手动调用一次lazyLoad方法，在页面刚load的时候将已经在视窗内的图片加载出来。
函数节流
所谓的函数节流就是当事件触发的频率很高时，并不是每次都需要去调用相对应的处理函数，以此来提高性能。比如这里的滚动事件，假设我们希望至少间隔200ms才钓鱼那个一次处理函数，那么可以新增一个方法
function throttle (delay, action) {
let last = 0;
return function () {
let now = new Date();
if (now - last > delay) {
action();
last = now;
}
}
}
然后将window.onscroll =lazyLoad；改成window.onscroll = throttle(200, lazyLoad)。这个函数在事件触发时，先去判断本次触发的时间和上次触发的时间的间隔，如果大于delay， 则运行处理函数。
函数用到了闭包的原理来保存last这个变量，对于闭包简单的解释一下就是throttle这个函数在调用结束后，本来应该销毁掉其内部的last变量，但是由于返回的是一个函数，返回的函数内引用了last这个变量，因此last被一直保存在了内存中。
throttle这个方法还有很多可以优化的地方，不在这里展开了。主题是懒加载嘛，后面有空了专门写一篇函数节流方法的文章。
