Vue的图片懒加载 vue-lazyload插件使用

• 图片懒加载是一种网页性能优化技术，页面加载时仅加载可见区域内的图像，图像只会在用户滚动或浏览到它们时才会被加载，而不是在页面一开始就全部加载。

• 优点

  • 可以减少首页首次加载的数量，减少服务器的压力
  • 有占位图片来展示预加载动态效果，用户体验更好一点

• 安装

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="要展示的图片"/>