-
图片懒加载是一种网页性能优化技术，页面加载时仅加载可见区域内的图像，图像只会在用户滚动或浏览到它们时才会被加载，而不是在页面一开始就全部加载。
-
优点
- 可以减少首页首次加载的数量，减少服务器的压力
- 有占位图片来展示预加载动态效果，用户体验更好一点
-
安装
npm install vue-lazyload
- 使用
// 全局使用的话 可以在main.js 文件注册
import VueLazyload from 'vue-lazyload'
// 配置
Vue.use(VueLazyload, {
preLoad: 1.3, //宽高比
loading: "//static/imgs/imgLoading.svg", //预加载图片
// error 加载失败图片
attempt: 1, // 加载错误后最大尝试次数
})
// <img v-lazy="要展示的图片"/>
