element ui el-carousel 滚动图 vue 基于vue-lazyload图片懒加载、延迟加载 解决方案

vue-lazyload插件github地址：https://github.com/hilongjw/vue-lazyload#requirements

效果是默认不加载图片，先用一个占位符图来代替，等使用图片的时再进行加载（比如滚动到图片的时候），如果真正的图片请求出错了，用默认的出错图片来进行占位

一、安装插件

$ npm install vue-lazyload --save

二、配置

//main.js
import VueLazyload from 'vue-lazyload'

Vue.use(VueLazyload, {
  preLoad: 1.3,
  attempt: 1  ,   // 加载图片数量
   listenEvents: ['scroll', 'wheel', 'mousewheel', 'resize', 'animationend', 'transitionend', 'touchmove']
})

具体配置api

 

key	description	default	options
preLoad	proportion of pre-loading height	1.3