概念
图片懒加载是一种优化网页性能的技术，主要用于延迟加载页面中用户当前不可见的区域的图片，从而减少初始页面加载时间、节省带宽并提升用户体验。
前提
我们需要用到交叉点观察器 API即Intersection Observer API，它是一种浏览器API，我们可以使用它来观察元素与视口的重叠程度，即它能判断目标元素能否与视口重叠
Intersection Observer API相关知识：developer.mozilla.org/en-US/docs/…
过程
准备
现在页面上有五个盒子，两张图片
在不干预的情况下，两张图片在我们不可见的时候，就已经加载完毕了
所以我们先让图片都不加载，当图片进入视口时才加载，即把src改成自定义属性data-src（临时把地址存在这），等到需要图片出现的时候再把存储在data-src里的图片地址赋值给原来的src属性。(直接使用src会立即加载)
写操作
先操作dom存储好要观察的一些图片，
再创建一个交叉口观察器去写观察到图片后的逻辑，
最后再遍历图片让每一张图片都绑上观察器
这样就实现了一个简单的图片懒加载功能
效果
视口看不见图片时
两张图片均未加载
看到第一张图片时，第一个img标签里就出现了src="./one.jpg"
加载了第一张图片
看到第二张图片时，第二个img标签内效果同理
加载了第二张图片
