• 主页
  • 归档
我的文章 友链 关于我

  • 主页
  • 归档

性能优化——图片懒加载的实现方式

2024-05-07

图片懒加载

vue3有提供懒加载的插件,这里我们使用VueUse hook库来自己封装一个图片懒加载的自定义指令

可以通过VueUse中的useIntersectionObserver来判断图片是否进入可视区域

useIntersectionObserver:提供对元素是否可见进行观察的功能,可用于实现懒加载等效果。

1
2
3
4
5
6
7
8
9
10
11
12
app.directive("lazy", {
mounted(el, binding) {
el.src = "@/assets/images/default.png"; // 使用默认图片
const { stop } = useIntersectionObserver(el, ([{ isIntersecting }]) => {
if (isIntersecting) {
el.src = binding.value;
//在监听的图片第一次完成加载后就停止监听,否侧上滑到已经加载过图片的可视区域还会触发监听
stop();
}
});
},
});

简单水一篇

写于综合阅览室

  • 性能优化
  • 图片懒加载

扫一扫,分享到微信

微信分享二维码
Vue3中自定义插件及其原理
自定义指令--防抖与节流
  1. 1. 图片懒加载
© 2024 xixiIBN5100
  • 我的文章
  • 友链
  • 关于我

tag:

  • 新的开始
  • vue源码
  • diff算法
  • patch
  • vue
  • Ref
  • 响应式
  • 源码
  • computed
  • watch
  • 方法逻辑
  • typescript
  • 复选框
  • sass
  • css
  • bem
  • 全局组件
  • 递归组件
  • 动态组件
  • slot
  • 异步组件
  • 骨架屏
  • 性能优化
  • 提高用户体验
  • 缓存组件
  • provide
  • inject
  • 模式设计
  • 发布订阅模式
  • 观察者模式
  • eventBus
  • v-model
  • 自定义组件
  • 自定义指令
  • 防抖
  • 节流
  • 图片懒加载
  • 自定义插件
  • eventLoop
  • nextTick
  • Vue底层
  • 备忘录
  • webpack
  • 配置操作
  • 面试题
  • js
  • API
  • vue router
  • router4
  • 命名视图
  • 重定向
  • 路由元信息
  • 网络
  • 面试
  • Vue的设计与实现

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录(注意不是yilia根目录)执行以下命令:
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置:

      jsonContent:
        meta: false
        pages: false
        posts:
          title: true
          date: true
          path: true
          text: false
          raw: false
          content: false
          slug: false
          updated: false
          comments: false
          link: false
          permalink: false
          excerpt: false
          categories: false
          tags: true
    

  • zzbond
  • 钠盐酱
  • Tancy
  • 过路人
  • 橙汁
  • jj
沉淀