Web 图片懒加载

解决思路

1. 利用 IntersectionObserver
2. 监听滚动，利用 getBoundingClientRect 进行判断
3. 浏览器原生 loading="lazy"

getBoundingClientRect

使用 getBoundingClientRect 方法可以获取元素的尺寸和位置。在页面滚动时，可以计算所有的图片元素，获取元素的距离视图的高度，和视图的高度。如果视图高度大于距离高度，则将懒加载的地址放到 src 中

img.getBoundingClientRect().top < window.innerHeigh

IntersectionObserver

IntersectionObserver 当元素进入到可视视图时就会触发回调

const imgIntersectionObserver = new IntersectionObserver((entries) => {     for (let img of entries) {          if(img.isIntersecting) {            img.src = img.dataset.src             imgIntersectionObserver .unobserve(img)         }      }})for (let img of imgList) {     imgIntersectionObserver .observe(img)}

原生支持

<img loading="lazy" src="" />