前言
在学习图片懒加载之前，我们先看看什么是懒加载。
1.什么是懒加载？
懒加载突出一个“懒”字，懒就是拖延迟的意思，所以“懒加载”说白了就是延迟加载，比如我们加载一个页面，这个页面很长很长，长到我们的浏览器可视区域装不下，那么懒加载就是优先加载可视区域的内容，其他部分等进入了可视区域再加载。
2.为什么要懒加载？
懒加载是一种网页性能优化的方式，它能极大的提升用户体验。就比如说图片，图片一直是影响网页性能的主要元凶，现在一张图片超过几兆已经是很经常的事了。但是如果每次进入页面就请求所有的图片资源，那么加载时间会很长，可能等图片加载出来用户也早就走了。所以，我们需要懒加载，如果进入页面，那么只请求可视区域的图片资源。
总而言之，全部加载的话会影响用户体验，而且浪费用户的流量，有些用户并不会全部看完所有的图片，但是全部加载又会耗费大量流量，所以我们需要图片懒加载。
懒加载的实现原理
由于网页中占用资源较多的一般是图片，所以我们一般实施懒加载都是对图片资源而言的，所以这里的实现原理主要是针对图片。
大家都知道，一张图片就是一个标签，而图片的来源主要是src属性。浏览器是否发起亲求就是根据是否有src属性决定的。
既然这样，那么我们就要对标签的src属性下手了，在没进入可视区域的时候，我们先不给这个
标签赋src属性，这样浏览器就不会发送请求了。
实现方式：了解一个API
图片懒加载的实现方式我们只需要了解一个API就行了：
getBoundingClientRect()//获取元素的大小及位置
懒加载的一个重点就是要知道什么时候图片是进入了可视区内，那么就上面这张图而言，我们有什么方法判断图片进入了可视区呢。
其实很简单：
我们先获取图片到可视区顶部的距离,并判断是否小于可视区的高度：
<!DOCTYPE html>
<meta charset="UTF-8">
<style>
img {
display: block;
margin-bottom: 50px;
width: 400px;
height: 400px;
}
</style>
<img src="./img2/timg.gif" data-src="./img2/time.jpg" alt="转存失败，建议直接上传图片文件">
<img src="./img2/timg.gif" data-src="./img2/time2.jpg" alt="转存失败，建议直接上传图片文件">
<img src="./img2/timg.gif" data-src="./img2/time3.jpg" alt="转存失败，建议直接上传图片文件">
<img src="./img2/timg.gif" data-src="./img2/time4.jpg" alt="转存失败，建议直接上传图片文件">
<img src="./img2/timg.gif" data-src="./img2/time5.jpg" alt="转存失败，建议直接上传图片文件">
<img src="./img2/timg.gif" data-src="./img2/time6.jpg" alt="转存失败，建议直接上传图片文件">
<img src="./img2/timg.gif" data-src="./img2/time7.jpg" alt="转存失败，建议直接上传图片文件">
<img src="./img2/timg.gif" data-src="./img2/time8.jpg" alt="转存失败，建议直接上传图片文件">
<img src="./img2/timg.gif" data-src="./img2/time9.jpg" alt="转存失败，建议直接上传图片文件">
<script>
// 全部用一张loading动画 一次请求
let num = document.getElementsByTagName("img").length; // 9
let img = document.getElementsByTagName("img"); // 集合，数组
let n = 0;
lazyload();
window.onscroll = lazyload;</script>
function lazyload() {
let seeHeight = document.documentElement.clientHeight; // 视口高度
// 滚动条的距离
let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
for(let i = n; i < num; i++){
// 该出现了
if(img[i].offsetTop < seeHeight + scrollTop){
if(img[i].getAttribute("src") === "./img2/timg.gif"){
img[i].src = img[i].getAttribute("data-src")
}
n = n + 1
}
}
}
</script>
</body>
</html>
