当前位置: 代码迷 >> 综合 >> 「VUE架构」VUE2.0 图片懒加载vue-lazyload
  详细解决方案

「VUE架构」VUE2.0 图片懒加载vue-lazyload

热度:27   发布时间:2023-12-13 06:55:08.0

本文主要介绍图片懒加载vue-lazyload的使用

1.第一步,安装vue-lazyload
打开package.json,找到dependencies如下:

"dependencies": {"vue-lazyload": "^1.2.4"},

安装并重启服务

npm install
npm run dev

2.第二步,引入vue-lazyload并调用
打开main.js,通过import引入并调用传参(全局配置,也可在对应的.vue页面局部引用)

import VueLazyLoad from 'vue-lazyload'
Vue.use(VueLazyLoad, {loading: require('common/image/default.png')  //此图片路径为懒加载的默认图,小伙伴根据实际情况更改路径
})

3.第三步,在.vue页面适配懒加载

 <img v-lazy="item.imgurl">

tips:背景图片也可以适用懒加载哦!