Web 图片懒加载

Question

解决思路

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="" />