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 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子1 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年1 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子2 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina2 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路3 小时前
React--Fiber 架构
前端·react.js·架构
伍哥的传说3 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409193 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding3 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js
布兰妮甜3 小时前
Vue+ElementUI聊天室开发指南
前端·javascript·vue.js·elementui