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

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

相关推荐
子伟-H52 小时前
App开发框架调研对比
前端
桃子不吃李子2 小时前
axios的二次封装
前端·学习·axios
SteveJrong2 小时前
面试题 - JavaScript
前端·javascript·面试·ecmascript·基础·找工作·红宝书
阿金要当大魔王~~2 小时前
uniapp 页面标签 传值 ————— uniapp 定义 接口
前端·javascript·uni-app·1024程序员节
全栈软件开发3 小时前
uniapp三端影视源码苹果cms自动采集电影视频网站源码前端源码带VIP
前端·uni-app·影视源码
chxii3 小时前
10.4FormData :前端文件上传与表单数据处理的核心工具
前端
AntBlack3 小时前
不当韭菜 : 好像真有点效果 ,想藏起来自己用了
前端·后端·python
楊无好3 小时前
react中props的使用
前端·react.js·前端框架
一个处女座的程序猿O(∩_∩)O4 小时前
Vue-Loader 深度解析:原理、使用与最佳实践
前端·javascript·vue.js
一点一木4 小时前
火山方舟 Responses API 实战指南:从概念到「公司尽调 Dossier 生成器」
前端·人工智能·api