Vue 图片懒加载

一、自定义插件

main.js 中添加指令信息

javascript 复制代码
// 定义全局指令
app.directive('img-lazy',{
    mounted(el,binding){
        // el: 指令绑定的元素 img
        // binding: binding.value 指定等于号后面绑定的表达式的值 图片url
        console.log(el)
        console.log(binding.value)
    }
})

测试 :创建 img.vue 模拟要加载的图片,控制台成功打印图片信息,证明自定义指令添加成功

xml 复制代码
<template>
    <div v-for="(item,index) in imgList" :key="index">
        <img :src="item" v-img-lazy="item"/>
        <br/>
    </div>
</template>

<script setup>
    const imgList = ["/src/images/1.png","src/images/2.png","src/images/3.png","src/images/4.png","src/images/5.png","src/images/6.png"]
</script>

二、监控图片是否可视

工具类安装:npm i @vueuse/core

调用该工具类下判断可视的方法:

测试

根据图片是否可视,会在控制台打印对应的布尔信息

三、实现图片懒加载

修改原组件:

测试

四、指令优化

附:懒加载核心代码

javascript 复制代码
// 定义懒加载插件
import { useIntersectionObserver } from '@vueuse/core'

export const lazyPlugin = {
  install (app) {
    // 懒加载指令逻辑
    app.directive('img-lazy', {
      mounted (el, binding) {
        // el: 指令绑定的那个元素 img
        // binding: binding.value  指令等于号后面绑定的表达式的值  图片url
        // console.log(el, binding.value)
        const { stop } = useIntersectionObserver(
          el,
          ([{ isIntersecting }]) => {
            console.log(isIntersecting)
            if (isIntersecting) {
              // 进入视口区域
              el.src = binding.value
              stop()
            }
          },
        )
      }
    })
  }
}
相关推荐
程序员爱钓鱼1 小时前
Go语言实战案例 — 项目实战篇:简易博客系统(支持评论)
前端·后端·go
excel8 小时前
ES6 中函数的双重调用方式:fn() 与 fn\...``
前端
可乐爱宅着9 小时前
全栈框架next.js入手指南
前端·next.js
你的人类朋友10 小时前
什么是API签名?
前端·后端·安全
会豪12 小时前
Electron-Vite (一)快速构建桌面应用
前端
中微子12 小时前
React 执行阶段与渲染机制详解(基于 React 18+ 官方文档)
前端
唐某人丶12 小时前
教你如何用 JS 实现 Agent 系统(2)—— 开发 ReAct 版本的“深度搜索”
前端·人工智能·aigc
中微子12 小时前
深入剖析 useState产生的 setState的完整执行流程
前端
遂心_13 小时前
JavaScript 函数参数传递机制:一道经典面试题解析
前端·javascript
小徐_233313 小时前
uni-app vue3 也能使用 Echarts?Wot Starter 是这样做的!
前端·uni-app·echarts