在vue3中手写按需加载图片

在我们的网页中.假如使用了大量的图片,每个图片都是需要去访问加载的
这就影响了我们的访问速度,手写一个按需加载组件,就可以解决这个问题
让图片处于页面视图的时候再加载,减轻网页访问负担

利用vue3官网给出的钩子
我们常用的就是onMountent
如官网所示

为了及时监测,这里使用vueUse来进行检测视图是否包含监控组件/标签
el代表的是标签本身,bing是代表了标签的值,一般用binding.value表示
isIntersecting代表监控的组件是否出现在视图中

app.directive('img-lazy',{
        mounted(el, binding) {
          // console.log(el);
         const {stop}=  useIntersectionObserver(
            el,
            ([{ isIntersecting }]) => {
              // console.log(isIntersecting);
              if(isIntersecting){
              // console.log(binding.value);
              console.log("el",el)
              el.src = binding.value
              stop()
              }
            },
          )
        },
      }

标签用v-img-lazy表示,在使用过程视图会反复出现这个懒加载进而出现重加载问题,那么我们引入vueuse内置的stop函数来进行预防,确保只执行一次
2.为了实现单一功能,我们另开一个文件,在main.js中使用vue.use(导入的该插件)

新开一个directives/index.js

import { useIntersectionObserver } from '@vueuse/core'


export  const lazyLand = {
   install(app){
    app.directive('img-lazy',{
        mounted(el, binding) {
          // console.log(el);
         const {stop}=  useIntersectionObserver(
            el,
            ([{ isIntersecting }]) => {
              // console.log(isIntersecting);
              if(isIntersecting){
              // console.log(binding.value);
              console.log("el",el)
              el.src = binding.value
              stop()
              }
            },
          )
        },
      })
   }

}