图片懒加载

什么是图片懒加载？

按需加载，即当图片需要展示的时候才去加载这个图片

图片懒加载的原理？

在页面刚加载时，先将不在可视区的图片src属性隐藏，而将其真正的地址存放在img标签自定义属性data-src中，当图片进入可视区时，再将真正的路径从data-src中取出并替换，这样便可以加快首屏加载的时间，并且减轻服务器的压力

图片懒加载的实现步骤？

1. 隐藏src：将图片的 src 属性设置为一个占位符或者一个空字符串，或者使用 data-src 属性存储真实的图片地址。
2. 监听滚动事件：通过 JavaScript 监听滚动事件，判断图片是否进入可视区域。
3. 判断图片位置：当滚动事件发生时，计算每个图片相对于浏览器窗口顶部的位置，判断是否进入了可视区域。
   通常使用 getBoundingClientRect()方法 或者clientHeight结合scrollTop获取元素的位置信息。
4. 加载图片：一旦图片进入可视区域，将占位符替换为真实的图片地址，或者将 data-src 属性的值赋给 src 属性，触发图片的加载。
5. 停止监听：一旦所有图片都被加载，或者用户已经离开页面，就停止监听滚动事件，以避免不必要的计算。

代码实现图片懒加载？

使用getBoundingClientRect实现

HTML
<img class="lazyImg" data-src="home/abc.jpg" />

JavaScript
<script>
  获取所有需要进行懒加载的图片
  const lazyImgs = document.querySelectorAll('.lazyImg');

  监听页面的滚动事件
  window.addEventListener('scroll', () => {
    遍历每张图片
    for (let i = 0; i < lazyImgs.length; i++) {
      const image = lazyImgs[i];

      判断图片位置是否进入可视区域
      const { top, bottom } = image.getBoundingClientRect();
      const windowHeight = window.innerHeight;
       
      if (top < windowHeight && bottom >= 0) {
        地址替换
        image.src = image.dataset.src;

        删除已经加载的图片
        lazyImgs.splice(i, 1);
        i--;
      }
    }

    判断图片是否全部加载完毕
    if (lazyImages.length === 0) {
      window.removeEventListener('scroll');
    }
  });
</script>

使用clientHeight,scrollTop实现

HTML
<img class="lazyImg" data-src="home/abc.jpg" />

JavaScript
<script>
const lazyImgs = document.querySelectorAll('.lazyImg');
window.addEventListener('scroll', () => {
    浏览器视口的高度
    const windowHeight = window.innerHeight||document.body.clientHeight;
    页面相对于浏览器视口顶部纵向滚动的距离
    const scrollHeight = window.pageYOffsetdocument.body.scrollTop;
    遍历每一张图片
    for(let i = 0; i < lazyImgs.length; i++){
        if(lazyImgs[i].offsetTop < windowHeight + scrollHeight){
            lazyImgs[i].src = lazyImgs[i].dataset.src;
            删除已经加载的图片
            lazyImgs.splice(i, 1);
            i--;
        }
    }
        判断图片是否全部加载完毕
    if (lazyImgs.length === 0) {
      window.removeEventListener('scroll');
    }
  })
</script>