Vue3性能优化之自定义指令实现图片懒加载

图片懒加载是一种常见性能优化的方式，进入网址时不全部加载图片  当用户进入图片可视区域时加载  不仅大大减少了服务器的压力  也可以时首屏时间变短

        图片懒加载的实现原理：在图片没进入可视区域的时候，只需要让 img 标签的 src 属性指向一张默认图片，在它进入可视区后，再替换它的 src 指向真实图片地址即可。

自定义v-lazy懒加载指令

• useIntersectionObserver：提供对元素是否可见进行观察的功能，可用于实现懒加载等效果。

安装
npm i @vueuse/core

        我们这里把这个拆分代码，通过插件的方法把懒加载指令封装为插件，main.js入口文件只需负责注册插件即可。

新建文件夹   directive/index.js       

//异步加载图片
let imageAsync = url => {
  return new Promise((resolve, reject) => {
    let img = new Image()
    img.src = url
    img.onload = () => {
      resolve()
    }
    img.onerror = err => {
      reject(err)
    }
  })
}

export const lazyPlugin = {
  install (app) {
    app.directive('lazy', {
      mounted (el, binding) {
        // el.src = defaultImg;
        const io = new IntersectionObserver(entries => {
          entries.forEach(item => {
            if (item.isIntersecting) {
              //使用异步加载图片
              imageAsync(binding.value)
                .then(() => {
                  //成功后再替换 img 标签的 src
                  el.src = binding.value
                })
                .catch(error => {
                  console.log('图片加载error', error)
                })
              io.unobserve(item.target)
            }
          })
        })
        io.observe(el)
      }
    })
  }
}

 main.js    注册插件

// 图片懒加载插件
import { lazyPlugin } from './directive/index'

app.use(lazyPlugin)

 // 自定义指令传入一个公网的地址，也就是这个地址百度上能看到的
<img v-lazy="'https://www....'" class="onlineLayout_img" alt="" />
     

滚动到可视区域时，img中src赋值了就会自动发起请求