什么是懒加载
懒加载的主要目的是作为服务器前端的优化，减少请求数或延迟请求数， 懒加载也叫延迟加载，延迟加载图片或符合某些条件时才加载某些图片。
懒加载的原理
只有img标签中的src写入了图片的地址，加载页面时才会请求图片，所以使用懒加载时在src中并不写入任何地址，把图片的真实地址放到data- (标签内部属性可存数据)属性中，在js中绑定鼠标滚动事件，其回调中遍历所有图片并作出判断，将出现在视口中的图片的 'data-' 属性保存的地址放到 'src' 中即可。
HTML
<h1>js懒加载</h1>
<div class="box">
<img src="" onerror="this.src='./img/loading.jpg'" class="img" lazyload="true" data-original="./img/1.jpg">
<img src="" onerror="this.src='./img/loading.jpg'" class="img" lazyload="true" data-original="./img/2.jpg">
<img src="" onerror="this.src='./img/loading.jpg'" class="img" lazyload="true" data-original="./img/3.jpg">
<img src="" onerror="this.src='./img/loading.jpg'" class="img" lazyload="true" data-original="./img/4.jpg">
<img src="" onerror="this.src='./img/loading.jpg'" class="img" lazyload="true" data-original="./img/5.jpg">
<img src="" onerror="this.src='./img/loading.jpg'" class="img" lazyload="true" data-original="./img/6.jpg">
<img src="" onerror="this.src='./img/loading.jpg'" class="img" lazyload="true" data-original="./img/7.jpg">
</div>
引入一堆图片src为空，地址写在data-original中，onerror表示当未加载图片时显示的临时加载页图片JavaScript
Script
window.onload = function () { //获取当前浏览器的视口高度
var viewHeight = document.documentElement.clientHeight; //鼠标滚动回调
function lazyload() {
var img = document.getElementsByClassName('img'); //获取所有图片集合 //遍历图片集合
for (let item of img) { //获取图片距视口顶部的距离
var imgHeight = item.getBoundingClientRect(); //判断当图片出现在视口160px时把地址放到src中，显示出图片
if (imgHeight.top < (viewHeight - 160)) {
item.src = item.getAttribute("data-original")
}
}
}
lazyload(); //页面加载时把当前视口中的图片加载进来
document.addEventListener('scroll', lazyload);}
