一、懒加载
1、什么是懒加载
懒加载也就是延迟加载。
当访问一个页面的时候，先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径（这样就只需请求一次，俗称占位图），只有当图片出现在浏览器的可视区域内时，才设置图片正真的路径，让图片显示出来。这就是图片懒加载。
2.为什么要使用懒加载？
很多页面，内容很丰富，页面很长，图片较多。比如说各种商城页面。这些页面图片数量多，而且比较大，少说百来K，多则上兆。要是页面载入就一次性加载完毕。估计大家都会等到黄花变成黄花菜了。
3.懒加载的原理是什么？
页面中的img元素，如果没有src属性，浏览器就不会发出请求去下载图片，只有通过javascript设置了图片路径，浏览器才会发送请求。
懒加载的原理就是先在页面中把所有的图片统一使用一张占位图进行占位，把正真的路径存在元素的“data-url”（这个名字起个自己认识好记的就行）属性里，要用的时候就取出来，再设置；
4.懒加载的实现步骤？
1)首先，不要将图片地址放到src属性中，而是放到其它属性(data-original)中。
2)页面加载完成后，根据scrollTop判断图片是否在用户的视野内，如果在，则将data-original属性中的值取出存放到src属性中。
3)在滚动事件中重复判断图片是否进入视野，如果进入，则将data-original属性中的值取出存放到src属性中。
5.懒加载的优点是什么？
页面加载速度快、可以减轻服务器的压力、节约了流量,用户体验好
<!DOCTYPE html>
<html>
<head>
<title>This is a title</title>
</head>
<body style="padding: 0; margin: 0;">
<img data-original="https://img2.baidu.com/it/u=1814268193,3619863984&fm=253&fmt=auto&app=138&f=JPEG?w=632&h=500" style="display: block; width: 300px; height: 300px;"/>
<img data-original="https://img1.baidu.com/it/u=2475127973,1009717621&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281" style="display: block; width: 300px; height: 300px;"/>
<img data-original="https://img1.baidu.com/it/u=1966616150,2146512490&fm=253&fmt=auto&app=138&f=JPEG?w=751&h=500" style="display: block; width: 300px; height: 300px;"/>
<img data-original="https://img1.baidu.com/it/u=2218815005,3124653454&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" style="display: block; width: 300px; height: 300px;"/>
<img data-original="https://img2.baidu.com/it/u=1010328615,2032873142&fm=253&fmt=auto&app=120&f=JPEG?w=1200&h=790" style="display: block; width: 300px; height: 300px;"/>
<script>
function lazyload () {
var viewHeight = document.documentElement.clientHeight // 可视区域的高度
console.log("viewHeight", viewHeight)
var imgList = document.querySelectorAll('img');
console.log("imgList===", imgList)
Array.prototype.forEach.call(imgList, function (item, index) {
var rect;
if (item.dataset.original === '')
return
console.log(`item${index}`, item)
console.log(`item${imgList.length - 1}`, imgList[imgList.length - 1])//通过最后一个和页面显示的几个进行对比，只有页面显示的图片才有src属性，其他的都没有
// console.log(`item${index}.dataset`, item.dataset)
// console.log("item.dataset.original", item.dataset.original)
rect = item.getBoundingClientRect()//获取当前图片到可视区域顶部的距离
// 图片一进入可视区，动态加载
if (rect.top < viewHeight) {
item.src = item.dataset.original
console.log(`rect${index}.top`, rect.top)
}
})
}
// 首屏要人为的调用，否则刚进入页面不显示图片
lazyload()
//监听屏幕滚动
document.addEventListener('scroll', lazyload)
</script>
</body>
</html>
