官网地址：https://www.npmjs.com/package/vue-lazyload
借鉴地址：https://segmentfault.com/a/1190000014928116
安装
npm i vue-lazyload -S
引入
// main.js
import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload)
配置参数
//static目录下的图片引用
Vue.use(VueLazyload,{
error:'/static/images/logo.png',//图片加载失败时候显示的图片
loading:'/static/images/loading.gif'//图片还未加载完成时候的loading图片
})
//assets目录下的图片引用, 需要加require引入图片
Vue.use(VueLazyload,{
error:require('./assets/images/logo.png'),
loading:require('./assets/images/loading.gif')
})
更多可配置参数
vue-lazyload.png
Vue.use(VueLazyload, {
preLoad: 1.3,
error: 'dist/error.png',
loading: 'dist/loading.gif',
attempt: 1,
// the default is ['scroll', 'wheel', 'mousewheel', 'resize', 'animationend', 'transitionend']
listenEvents: [ 'scroll' ]
})
基本用法
-
![]()
// 背景图片用法
![]()
使用v-lazy-container
![]()
![]()
![]()
![]()
![]()
![]()
![]()
![]()
![]()
使用lazy-component组件
实现被 lazy-component 标签包含的元素延迟渲染。
// main.js
Vue.use(VueLazyload, {
lazyComponent: true
});
![]()
对象方式
data () {
return {
imgObj: {
src: 'http://xx.com/logo.png',
error: 'http://xx.com/error.png',
loading: 'http://xx.com/loading-spin.svg'
},
imgUrl: 'http://xx.com/logo.png' // String
}
}
![]()
![]()
css方式
除了src 形式外，我们还可以借用 css 来实现加载状态。
该插件会在图片元素上加上当前的加载状态：分别是 loading、loaded、error。
此时使用元素选择器，来给每一个状态添加相应的样式
listenEvents
默认配置的监听事件：['scroll', 'wheel', 'mousewheel', 'resize', 'animationend', 'transitionend', 'touchmove']
为了提高页面性能，我们可以指定当前页面懒加载监听的事件，如['scroll']