使用VUE3指令实现图片占位图

前言

在页面中要显示图片时，有很多种的处理方法，最常见的像懒加载，预加载。懒加载要我们对图片的所处位置进行判断，再决定图片是否加载；预加载是提前加载，需要使用的时候，从内存中读取，从而优化用户体验。但是有使用我们就是不想这么麻烦，就是想加载图片，但是图片又不是一帧一帧出来的，这个使用可以使用占位图这个处理方法。

处理方法

在不进行处理时，可以看到是一帧一帧出来的，用户的体验不是很好

在使用占位图进行处理时，我们先用一个纯色的图片代替需要加载的图片，等图片完全加载完后再把占位图换掉

代码如下,headPortrait是一个变量,内容为图片地址

   <img src="@/assets/img/initImg.png" v-lazy:[headPortrait] />

// 图片占位符指令
app.directive('lazy', {
  mounted(el, binding) {
    setImg(el, binding)
  },
  updated(el, binding) {
    setImg(el, binding)
  }
})
async function setImg(el: HTMLImageElement, binding: any) {
  let imgURL = binding.arg;//获取图片地址
  if (imgURL) {
    let exist = await imageIsExist(imgURL);
    if (exist) {
      el.setAttribute('src', imgURL);
    }
  }
}
let imageIsExist = function (url: string) {
  return new Promise((resolve) => {
    let img = new Image();
    img.src = url;
    img.onload = function () {
      resolve(true);
    }
    img.onerror = function () {
      resolve(false);
    }
  })
}

结语

完结，感兴趣的快去试试