vue3 图片懒加载的实现

什么是图片懒加载？

图片懒加载就是鼠标滑到哪，图片就加载到哪

一 开始把图片的地址放在data-set属性中，而不是放在src中，这样图片就不会发送http请求。我们通过计算距离，当 整个页面的高度 < 页面滑动的距离 + 浏览器可视区域的距离 的时候，就把data-set属性换为src属性，将图片显示出来

接下来我们就步入主题，直接要害

1.创建一个ts文件：

2.在 lazyload.ts 里面复制如下代码:

// 全局指令
export default  (app:any) => {
  // 图片懒加载指令
  app.directive('lazyload', {
    mounted (el:any, binding:any) { // vue2.0 inserted vue3.0 mounted
      const observer = new IntersectionObserver(([{ isIntersecting }]) => {
        if (isIntersecting) { // isIntersecting判断是否进入视图
          observer.unobserve(el) // 进入视图后，停止监听
          el.onerror = () => { // 加载失败显示默认图片
              el.src = '/img/a.jpg'
          }  
          el.src = binding.value // 进入视图后，把指令绑定的值赋值给src属性，显示图片
        }
      }, {
        threshold: 0.01 // 当图片img元素占比视图0.01时 el.src = binding.value
      })
      observer.observe(el) //观察指令绑定的dom
    }
  })
}

3. 在 main.ts文件里面对 hooks 函数进行 全局注册

import { createApp } from 'vue'
import App from './App.vue'

// 引入图片懒加载文件
import imgLazy from './hooks/lazyload'

const app = createApp(App)

// 全局注册图片懒加载
imgLazy(app)

app.mount('#app')

4.在 对应的 vue 文件进行应用 

// 将 src 换成 v-lazyload 即可
<img v-lazyload="v.image" alt="" />