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

前提:使用到了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方法的目的就是:在监听的图片第一次完成加载之后就停止监听

相关推荐
用户214118326360224 分钟前
dify案例分享-免费玩转 AI 绘图!Dify 整合 Qwen-Image,文生图 图生图一步到位
前端
IT_陈寒35 分钟前
Redis 性能翻倍的 7 个冷门技巧,第 5 个大多数人都不知道!
前端·人工智能·后端
mCell7 小时前
GSAP ScrollTrigger 详解
前端·javascript·动效
gnip7 小时前
Node.js 子进程:child_process
前端·javascript
excel10 小时前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel12 小时前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼13 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping13 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙14 小时前
[译] Composition in CSS
前端·css
白水清风14 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化