说明:

  1.           虽然我们已经做了组件数据懒加载，但是由于它内部的图片非常多，如果一个组件内图片非常<br />       多的时候，我们依旧有必要做一下图片懒加载，把网络性能优化做到极致

实现方式:

  1.   在vue3中通过自定义指令的方式达成图片懒加载的效果

现在的代码使用:

  1. <img src="http://xxx.com/x.jpg" />

使用目标: ** 通过自定义指令完成的

  1. 使用目标-： 只有当这个图片进入可视区时，才去请求图片对应的资源--
  2. <img v-imgLazy="http://xxx.com/x.jpg" />

前提 先要会定义自定义指令:

自定义指令(vue3)

1. 定义格式

  1. // 定义全局指令
  2. const myPlugin =  {
  3.   install (app) {
  4.     // app是Vue实例。 e.g:  app = createApp()
  5.     app.directive('指令名', {
  6.       // 省略其他生命周期钩子函数
  7.       // el： 使用了指令的dom
  8.       // binding.value:  v-指令名="binding.value就是这里表达式的值"
  9.       mounted (el, binding) {
  10.         console.log(el, binding.value)
  11.       }
  12.     })
  13.   }
  14. }
  15. export myPlugin   // 在main.js中记得注册一下  createApp(App).use(myPlugin)

2. 使用格式:

  1. <元素 v-指令名="value" />
  2. <组件 v-指令名="value" />

落地代码

  1. import { useIntersectionObserver } from '@vueuse/core'
  2. import defaultImage from '@/assets/images/200.png'
  3. const myDirective = {
  4.   install (app) {
  5.     app.directive('imgLazy', {
  6.       mounted (el, binding) {
  7.         el.src = defaultImage // 这个是给src一个默认的图片 如果图片没有加载,就用这个图
  8.         console.log('自定义指令', el, binding)
  9.         const { stop } = useIntersectionObserver(el, ([{ isIntersecting }], observeDom) => {
  10.           if (isIntersecting) {
  11.             stop()
  12.             el.src = binding.value
  13.             el.onerror = function () {
  14.               console.log('图片请求出错')
  15.               el.src = defaultImage
  16.             }
  17.           }
  18.         }, { threshold: 0 })
  19.       }
  20.     })
  21.   }
  22. }
  23. export default myDirective

在组件模板中的使用:

  1. <img v-imgLazy="i.picture" alt="">
  3. <img v-imgLazy="good.picture" alt="" />

最终效果:

打开chrome调试面板，network下的img请求，有没有随着滚动行为的发生图片的请求逐渐变多了起来