vue3自定义图片懒加载指令

Vue.js图片懒加载实现

原创已于 2022-04-16 10:04:51 修改 · 797 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript

于 2022-04-15 16:30:54 首次发布

图片懒加载专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何在Vue.js应用中实现图片懒加载功能。通过创建一个名为`v-lazy`的自定义指令，利用Intersection Observer API监测图片是否进入视口，当图片进入视口时加载图片，并处理图片加载失败的情况，提供默认图片。该指令的使用方法是在图片元素上添加`v-lazy`指令并绑定图片URL。最后，将指令导入到main.js文件中完成配置。

<img v-lazy="pictureUrl" alt="">

export default {
  install (app) {
    // 定义指令
    defineDirective(app)
  }
}
// 定义指令
const defineDirective = (app) => {
  // 图片懒加载指令 v-lazy
  app.directive('lazy', {
    mounted (el, binding) {
      // 创建一个观察对象，来观察当前使用指令的元素
      const observe = new IntersectionObserver(([{ isIntersecting }]) => {
        if (isIntersecting) {
          // 停止观察
          observe.unobserve(el)
          //  处理图片加载失败 error 事件
          el.onerror = () => {
            // 加载失败，设置默认图
            el.src = '默认图'
          }
          el.src = binding.value
        }
      }, {
        threshold: 0 // 到达该dom顶部与可见视图底部相切距离时加载
      })
      // 开启观察
      observe.observe(el)
    }
  })
}

最后将该js引入main.js使用即可

import { createApp } from 'vue'
import App from './App.vue'
import imgLazy from 'js路径'
createApp(App).use(imgLazy).mount('#app')