什么是懒加载？
- 懒加载（Lazy Loading），也称为延迟加载，是一种优化网页性能的技术。它的核心思想是延迟加载网页中的某些资源（如图像、视频、脚本等），直到需要使用这些资源的时候才进行加载。这样可以避免在页面初始加载时加载所有资源，从而减少页面的初始加载时间和数据流量，提高页面的加载速度和性能。
- 总结的来说当我们并不需要某些资源在进入界面时就进行加载，比如说一个html界面存在大量的图片地址，我们只需要加载首先进入界面的那几张图片即可，并不需要，一次性将几百张几千张图片一起加载出来。这样的方式会大大提高页面性能。
视窗与页面滚动
首先让我们先看一张图，视窗指的是在页面中我们能够看到的窗口，称为视窗。
在我们使用滚动条往下面滚动时，由于视窗的高度是有限度的，所以随着往下滑动的过程前面的内容就会被隐藏掉。
我们可以通过webAPI分别算出视窗与滚动隐藏的具体值。
clientHeight
document.documentElement.clientHeight
document.documentElement表示得到网页的根元素html
document.documentElement.clientHeight表示得到了视窗的高度
scrollTop
let scrollTop = document.documentElement.scrollTop || document.body.scrollTop
由于不同浏览器的版本兼容问题，给出了两种计算滚动隐藏的具体值的方式
document.body.scrollTop、document.documentElement.scrollTop
滚动监听
window.addEventListener('scroll', ()=>{})
滚动条在滚动的时候持续触发的事件，用来监听整个页面滚动 或者某个元素滚动
自定义属性
<body>
<div class="test" data-test="hello"></div>
<script>
const x = document.querySelector('.test')
console.log(x.dataset.test);
</script>
</body>
我们可以使用data-随意定义属于我们自己的属性，并通过.dataset方式得到写入的值。
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
img {
width: 60%;
}
</style>
</head>
<body>
<img data-src="https://tse2-mm.cn.bing.net/th/id/OIP-C.Ww3zLTOAXOUTYAoV3E5UOQHaKX?rs=1&pid=ImgDetMain">
<img data-src="https://tse2-mm.cn.bing.net/th/id/OIP-C.Ww3zLTOAXOUTYAoV3E5UOQHaKX?rs=1&pid=ImgDetMain">
<img data-src="https://tse2-mm.cn.bing.net/th/id/OIP-C.Ww3zLTOAXOUTYAoV3E5UOQHaKX?rs=1&pid=ImgDetMain">
<img data-src="https://tse2-mm.cn.bing.net/th/id/OIP-C.Ww3zLTOAXOUTYAoV3E5UOQHaKX?rs=1&pid=ImgDetMain">
<img data-src="https://tse2-mm.cn.bing.net/th/id/OIP-C.Ww3zLTOAXOUTYAoV3E5UOQHaKX?rs=1&pid=ImgDetMain">
<img data-src="https://tse2-mm.cn.bing.net/th/id/OIP-C.Ww3zLTOAXOUTYAoV3E5UOQHaKX?rs=1&pid=ImgDetMain">
<img data-src="https://tse2-mm.cn.bing.net/th/id/OIP-C.Ww3zLTOAXOUTYAoV3E5UOQHaKX?rs=1&pid=ImgDetMain">
<img data-src="https://tse2-mm.cn.bing.net/th/id/OIP-C.Ww3zLTOAXOUTYAoV3E5UOQHaKX?rs=1&pid=ImgDetMain">
<script>
//获取imgs数组
const imgs = document.querySelectorAll('img')
//储存数组长度，优化性能
const num = imgs.length
//记录懒加载的图片数量，便于移除监听
let n = 0
//自定义具名函数laodImage，便于后续调用
function laodImage() {
//计算视窗的高度
let screenHeight = document.documentElement.clientHeight
//计算视窗头部的高度
let scrollTop = document.documentElement.scrollTop || document.body.scrollTop
//遍历数组对象，实现监听
for (let i = 0; i < num; i++) {
//将图片移动位置与（视窗+视窗上方）大小对比，若小于则满足懒加载的要求
if (imgs[i].offsetTop < screenHeight + scrollTop) {
//将自定义属性赋给src，实现图片的加载
imgs[i].src = imgs[i].dataset.src
//累加n，判断懒加载是否全部结束
n = i + 1
if (n === num) {
//加载完毕
window.removeEventListener('scroll', laodImage)
}
}
}
}
laodImage()
//调用scroll监听
window.addEventListener('scroll', laodImage)
</script>
</body>
</html>
