vue-lazyload — 懒加载图片和组件

仅支持 Vue2，不支持 Vue3

安装依赖包

npm i vue-lazyload -S

在 main.js 使用插件

import VueLazyload from 'vue-lazyload'
 
Vue.use(VueLazyload, {
  preLoad: 1.3, // 预加载高度的比例
  error: require('./assets/error.gif'),
  loading: require('./assets/loading.gif'),
  attempt: 2, // 尝试次数
})

在组件中使用

export default { data() { return { imgList: [ require('../assets/img/1.jpg'), require('../assets/img/2.jpg'), require('../assets/img/3.jpg'), require('../assets/img/4.jpg'), require('../assets/img/5.jpg'), require('../assets/img/6.jpg'), require('../assets/img/7.jpg'), require('../assets/img/8.jpg'), require('../assets/img/9.jpg'), require('../assets/img/10.jpg'), require('../assets/img/11.jpg'), require('../assets/img/12.jpg'), require('../assets/img/13.jpg'), require('../assets/img/14.jpg'), require('../assets/img/15.jpg'), require('../assets/img/16.jpg'), require('../assets/img/17.jpg'), require('../assets/img/18.jpg'), require('../assets/img/19.jpg'), require('../assets/img/20.jpg'), ] }; }, };