欢迎访问响应式SPA SSR网站!

English
原创前端技术博客,致力于分享前端学习路上的第一手资料。专注 web 前端开发、移动端开发、前端工程化、前端职业发展,做最有价值的前端技术学习网站。

前端·小阳仔

关注互联网和前端开发技术的博客网站!

当前位置: 导航  >  前端小知识  >  文章详情

图片懒加载vue3-lazy

发布时间:2022-03-11   作者:富朝阳    我要评论我要评论

github上一顿搜,找到了 vue3-lazy,看文档使用步骤跟之前类似,简单操作之后,可用,也提升了项目首页加载速度,beautiful,赶紧记录一下使用步骤,方便他人。

安装命令

npm install vue3-lazy -S
//或者
yarn add vue3-lazy

main.ts中初始化

import App from './App.vue'
import lazyPlugin from 'vue3-lazy'

createApp(App)
  .use(lazyPlugin, {
    loading: require('@/assets/images/default.png'), // 图片加载时默认图片
    error: require('@/assets/images/error.png')// 图片加载失败时默认图片
  })
  .mount('#app')

template中使用

<ul>
  <li v-for="img in list">
    <img v-lazy="img.src" >
  </li>
</ul>

github地址https://github.com/ustbhuangyi/vue3-lazy

图片懒加载vue3-lazy

欢迎在评论区交流。如果文章对你有所帮助,不要忘了点上宝贵的一赞!

猜你喜欢
  • 前端性能优化9大策略(面试一网打尽)!
    前端性能优化9大策略(面试一网打尽)!
    wonderful
  • 解决angualr13 form表单设置disabled不起作用问题
    解决angualr13 form表单设置disabled不起作用问题
    wonderful
  • 什么是变量提升?var、let 及 const 区别?什么是暂时性死区?
    什么是变量提升?var、let 及 const 区别?什么是暂时性死区?
    wonderful
  • Webpack性能优化
    Webpack性能优化
    wonderful
  • CSS实现三种常用的三角形效果
    CSS实现三种常用的三角形效果
    wonderful
  • vite构建打包性能优化
    vite构建打包性能优化
    wonderful

给我留言

专注于程序员工作、学习、编程提效。

Copyright © www.code-nav.top All Rights Reserved.

前端小阳仔 提供技术支持 备案号:陕ICP备19013504号

LOADING