vue3 图片懒加载的实现

在一些图片比较多的网站会用到 图片懒加载 技术，这项技术可以延迟加载图像，只当图片出现在我们看到的视图中才加载，它的好处是 大大提高用户体验，节省不必要的资源浪费以及网站的性能提升等 。

首先 实现思路:

img标签中的src属性给一个默认图片 比如---加载中的图片，什么都可以...，再在img标签自定义一个属性 例如：datasrc为循环的真实图片路径，这个自定义属性待会要和src替换，在页面滚动时，如果当前视图大小中有这张图片则进行src替换，直接上代码

在页面加载完成后给html加上滚动事件（scroll），判断图片位置

  <div class="all">
    <!-- 固定头 -->
    <div class="header">菜单</div>
    <!-- 这是图片+内容部分 -->
    <div class="main">
      <div v-for="i in data.list" class="div" @click="torouter(i.goods_id)">
        <!-- 左边图片 -->
        <div class="left">
          <img src="load.jpg" :datasrc="i.goods_small_logo" />
        </div>
        <!-- 右边描述文字 -->
        <div class="right">{{i.goods_name}}</div>
      </div>
    </div>
  </div>

 let router = useRouter();
    //获取根节点
    let html = document.documentElement;
    const data = reactive({
      list: [],
    });
    onMounted(() => {
      //初始化数据
      init();
      //滚动时判断图片位置
      window.addEventListener("scroll", lazyload);
    });
    let init = () => {
    //这个接口是从网上找的，随便用
      axios
        .get(
          "https://api-hmugo-web.itheima.net/api/public/v1/goods/search?query=TCL&pagenum=1&pagesize=50"
        )
        .then((res) => {
            //获取初始化数据
          data.list = res.data.message.goods;
          //页面打开时显示当前的图片
          //这里是为了在获取数据后防止dom未渲染，判断图片找不到dom，所以在dom更新后执行图片
          nextTick(() => {
            lazyload();
          });
        });
    };
    let torouter = (id) => {
      router.push("/about?id=" + id); //详情跳转
    };
    let lazyload = () => {
      // 获取所有的图片
      let imgs = document.querySelectorAll("img");
      for (let i = 0; i < imgs.length; i++) {
        //当前图片距离顶部高度 <= 当前视图 进行src替换
        if (imgs[i].offsetTop <= html.clientHeight + html.scrollTop) {
          setTimeout(() => {
            imgs[i].src = imgs[i].getAttribute("datasrc");
          }, 300);
        }
      }
    };
    return {
      data,
      torouter,
    };
  },

效果：

最核心的地方在于每个默认图片的偏移位置和当前视图位置的对比， html.clientHeight + html.scrollTop也就是当前视图高度+当前距离顶部的高度，就是现在滚动视图的地方，如果遍历的图片存在于当前视图，就进行加载.

图片懒加载核心函数

let lazyload = () => {
      // 获取所有的图片
      let imgs = document.querySelectorAll("img");
      for (let i = 0; i < imgs.length; i++) {
        //当前图片距离顶部高度 <= 当前视图 进行src替换
        if (imgs[i].offsetTop <= html.clientHeight + html.scrollTop) {
          setTimeout(() => {
            imgs[i].src = imgs[i].getAttribute("datasrc");
          }, 300);
        }
      }
    };

在挂载阶段通过window的scroll事件 ， 滚动就触发上述函数，就可实现图片的懒加载

这里的定时器写了300毫秒是为了更直观的看到图片的显示过程，可以自己尝试更改