Vue-Lazyload
一款适于在应用中懒加载图片的vue插件,下面是一些值得注意的地方:
- 轻量、功能强大且易于使用
- 可作用于任意一种图片
- 在图片加载过程中添加加载样式
- 同时支持Vue 1.0和Vue 2.0
Demo
要求
- Vue.js 1.x 或者 2.x
安装
npm
$ npm install vue-lazyload
CDN
CDN: https://unpkg.com/vue-lazyload/vue-lazyload.js
<script src="https://unpkg.com/vue-lazyload/vue-lazyload.js"></script>
<script>
Vue.use(VueLazyload)
...
</script>
使用
main.js
import Vue from 'vue'
import App from './App.vue'
import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload)
// or with options
Vue.use(VueLazyload, {
preLoad: 1.3,
error: 'dist/error.png',
loading: 'dist/loading.gif',
attempt: 1
})
new Vue({
el: 'body',
components: {
App
}
})
构造选项options
key | description | default | options |
---|---|---|---|
preLoad | proportion of pre-loading height | 1.3 | Number |
error | src of the image upon load fail | 'data-src' | String |
loading | src of the image while loading | 'data-src' | String |
attempt | attempts count | 3 | Number |
listenEvents | events that you want vue listen for | ['scroll', 'wheel', 'mousewheel', 'resize', 'animationend', 'transitionend', 'touchmove'] | Desired Listen Events |
adapter | dynamically modify the attribute of element | { } | Element Adapter |
filter | the image’s src filter | { } | Image url filter |
lazyComponent | lazyload component | false | Lazy Component |
想要监听的事件
通过传递给监听器事件的名字,你可以决定哪些事件可以触发懒加载。
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' ]
})
Image url filter
动态的修改图片路径。
Vue.use(vueLazy, {
filter: {
webp ({ src }) {
const isCDN = /qiniudn.com/
if (isCDN.test(src)) {
src += '?imageView2/2/format/webp'
}
return src
},
someProcess ({ el, src }) {
if (el.getAttribute('large')) {
src += '?large'
}
return src
}
}
})
Element Adapter
Vue.use(vueLazy, {
adapter: {
loaded ({ bindType, el, naturalHeight, naturalWidth, $parent, src, loading, error, Init }) {
// do something here
// example for call LoadedHandler
LoadedHandler(el)
},
loading (listender, Init) {
console.log('loading')
},
error (listender, Init) {
console.log('error')
}
}
})
Lazy Component
<lazy-component @show="handler">
<img class="mini-cover" :src="img.src" width="100%" height="400">
</lazy-component>
<script>
{
...
methods: {
handler (component) {
console.log('this component is showing')
}
}
}
</script>
执行
基础
vue-lazyload会将这个img元素的src设置为imgUrl字符串。
<script>
export default {
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
}
}
}
</script>
<template>
<div ref="container">
<img v-lazy="imgUrl"/>
<div v-lazy:background-image="imgUrl"></div>
<!-- with customer error and loading -->
<img v-lazy="imgObj"/>
<div v-lazy:background-image="imgObj"></div>
<!-- Customer scrollable element -->
<img v-lazy.container ="imgUrl"/>
<div v-lazy:background-image.container="img"></div>
<!-- srcset -->
<img v-lazy="'img.400px.jpg'" data-srcset="img.400px.jpg 400w, img.800px.jpg 800w, img.1200px.jpg 1200w">
<img v-lazy="imgUrl" :data-srcset="imgUrl' + '?size=400 400w, ' + imgUrl + ' ?size=800 800w, ' + imgUrl +'/1200.jpg 1200w'" />
</div>
</template>
CSS state
在图片加载时,样式有三种状态,分别是loading、loaded和error
<img src="imgUrl" lazy="loading">
<img src="imgUrl" lazy="loaded">
<img src="imgUrl" lazy="error">
<style>
img[lazy=loading] {
/*your style here*/
}
img[lazy=error] {
/*your style here*/
}
img[lazy=loaded] {
/*your style here*/
}
/*
or background-image
*/
.yourclass[lazy=loading] {
/*your style here*/
}
.yourclass[lazy=error] {
/*your style here*/
}
.yourclass[lazy=loaded] {
/*your style here*/
}
</style>
方法
事件钩子
vm.$Lazyload.$on(event, callback)
vm.$Lazyload.$off(event, callback)
vm.$Lazyload.$once(event, callback)
- $on监听普通事件loading、loaded和error
- $once监听事件,但是只有一次
- $off移除监听器
参数
{string} event
{Function} callback
例子
vm.$Lazyload.$on('loaded', function ({ bindType, el, naturalHeight, naturalWidth, $parent, src, loading, error }, formCache) {
console.log(el, src)
})
vm.$Lazyload.$once('loaded', function ({ el, src }) {
console.log(el, src)
})
function handler ({ el, src }, formCache) {
console.log(el, src)
}
vm.$Lazyload.$on('loaded', handler)
vm.$Lazyload.$off('loaded', handler)
vm.$Lazyload.$off('loaded')
懒加载处理器
vm.$Lazyload.lazyLoadHandler
手动触发懒加载位置计算。
this.$Lazyload.lazyLoadHandler()
原文链接
https://github.com/HeliumLau/vue-lazyload/blob/master/README.md