vue图片懒加载vue-lazyload

最新推荐文章于 2024-02-21 16:42:47 发布

ALSO666

最新推荐文章于 2024-02-21 16:42:47 发布

阅读量389

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/also666/article/details/127674770

版权

vue图片懒加载vue-lazyload

需求描述
功能实现

需求描述

图片过大，加载缓慢，图片懒加载，添加Loading状态，优化展示效果。

功能实现

1.安装vue-lazyload

npm install vue-lazyload --save-dev

2.main.js中全局引用

import VueLazyload from "vue-lazyload";
Vue.use(VueLazyload, {
  preLoad: 1.3,
  error: require('../src/assets/images/error.png'),// 图片错误的默认图片
  loading: require('../src/assets/images/loading.gif'),// 图片Loading状态下的默认图片
  attempt: 1
});