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()
            }
          },
        )
      }
    })
  }
}
相关推荐
_丿丨丨_5 小时前
XSS(跨站脚本攻击)
前端·网络·xss
天天进步20155 小时前
前端安全指南:防御XSS与CSRF攻击
前端·安全·xss
拾光拾趣录7 小时前
括号生成算法
前端·算法
拾光拾趣录8 小时前
requestIdleCallback:让你的网页如丝般顺滑
前端·性能优化
前端 贾公子8 小时前
vue-cli 模式下安装 uni-ui
前端·javascript·windows
拾光拾趣录8 小时前
链表合并:双指针与递归
前端·javascript·算法
@大迁世界9 小时前
前端:优秀架构的坟墓
前端·架构
期待のcode9 小时前
图片上传实现
java·前端·javascript·数据库·servlet·交互
hbrown10 小时前
Flask+LayUI开发手记(十一):选项集合的数据库扩展类
前端·数据库·python·layui
猫头虎10 小时前
什么是 npm、Yarn、pnpm? 有什么区别? 分别适应什么场景?
前端·python·scrapy·arcgis·npm·beautifulsoup·pip