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()
            }
          },
        )
      }
    })
  }
}
相关推荐
超级大只老咪23 分钟前
字段行居中(HTML基础语法)
前端·css·html
IT_陈寒36 分钟前
Python开发者必看!10个高效数据处理技巧让你的Pandas代码提速300%
前端·人工智能·后端
只_只1 小时前
npm install sqlite3时报错解决
前端·npm·node.js
FuckPatience1 小时前
Vue ASP.Net Core WebApi 前后端传参
前端·javascript·vue.js
数字冰雹1 小时前
图观 流渲染打包服务器
服务器·前端·github·数据可视化
JarvanMo1 小时前
Flutter:我在网上看到了一个超炫的动画边框,于是我在 Flutter 里把它实现了出来
前端
returnfalse1 小时前
前端性能优化-第三篇(JavaScript执行优化)
前端·性能优化
yuzhiboyouye1 小时前
前端架构师,是架构什么
前端·架构
全马必破三1 小时前
Buffer:Node.js 里处理二进制数据的 “小工具”
前端·node.js
web安全工具库1 小时前
Linux 高手进阶:Vim 核心模式与分屏操作详解
linux·运维·服务器·前端·数据库