通过自定义指令实现图片懒加载

前提:使用到了VueUse插件。

先创建自定义插件文件夹

javascript 复制代码
// 定义懒加载插件
import { useIntersectionObserver } from '@vueuse/core' // 这个是VueUse里的一个方法

export const lazyPlugin = {
  install(app) {
    // 懒加载指令逻辑  定义全局指令
    app.directive('img-lazy', {
      mounted(el,binding) {
        // el: 指令绑定的元素 在这里指img元素
        // binding:binding.value 指令等于号后面绑定的表达式的值 这里指图片url
        // useIntersectionObserver方法是判断目标元素是否进入视口区域
        // 解构出stop方法,手动停止监听防止内存浪费
        const { stop } = useIntersectionObserver(
          el,
          ([{ isIntersecting }]) => {
            if (isIntersecting) {
              // 进入视口区
              el.src = binding.value
              stop()
            }
          },
        )
      }
    })
  }
}

在需要实现图片懒加载区域添加上自定义指令

html 复制代码
<img v-img-lazy="item.picture" alt="">

在main.js中引入注册

javascript 复制代码
// 引入懒加载指令插件并注册
import { lazyPlugin } from './directives'
const app = createApp(App)
app.use(lazyPlugin)

注意点就是:useIntersectionObserver对于元素的监听是一直存在的,除非手动停止监听,所以stop方法的目的就是:在监听的图片第一次完成加载之后就停止监听

相关推荐
Vicky&James6 分钟前
WPF到Web的无缝过渡:英雄联盟客户端项目OpenSilver迁移实战
前端·wpf
m0_7482336410 分钟前
RabbitMQ 进阶
android·前端·后端
不想有bug的小菜鸟18 分钟前
vue3使用iframe全屏展示pdf效果
前端·pdf
m0_7482386319 分钟前
Spring Boot项目接收前端参数的11种方式
前端·spring boot·后端
u01005596020 分钟前
前端代理,解决跨域问题讲解
前端
quitv25 分钟前
react脚手架配置别名
前端·javascript·react.js
m0_5287238134 分钟前
前端如何进行性能优化
前端·性能优化
化作繁星35 分钟前
在 Vue 3 中,如何缓存和复用动态组件
前端·vue.js·缓存
一粒沙-1 小时前
iOS 将GIF图分享至微信
前端·ios
graywen1 小时前
从文本到图像:SSE 如何助力 AI 内容实时呈现?(Typescript篇)
前端