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

猜你喜欢

转载自blog.csdn.net/Beatingworldline/article/details/137785481