vue-lazyload
npm引入：npm i vue-lazyload -S
CDN引入：[https://unpkg.com/vue-lazyload/vue-lazyload.js](https://unpkg.com/vue-lazyload/vue-lazyload.js)
使用：
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
}
})
template:
<ul>
<li v-for="img in list">
<img v-lazy="img.src" >
</li>
</ul>
Constructor 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 listener filter | { } |
Image listener filter |
lazyComponent |
lazyload component | false |
Lazy Component |
dispatchEvent |
trigger the dom event | false |
Boolean |
throttleWait |
throttle wait | 200 |
Number |
observer |
use IntersectionObserver | false |
Boolean |
observerOptions |
IntersectionObserver options | { rootMargin: '0px', threshold: 0.1 } | IntersectionObserver |
silent |
do not print debug info | true |
Desired Listen Events
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' ]
})
Methods
Event Hook
vm.on(event, callback) vm.
off(event, callback) vm.
once(event, callback)
once Listen for a custom event, but only once. The listener will be removed once it triggers for the first time.
$off Remove event listener(s).
vm.
on
Example
vm.$Lazyload.$on('loaded', function ({ bindType, el, naturalHeight, naturalWidth, $parent, src, loading, error }, formCache) {
console.log(el, src)
})
vm.once
Example
vm.$Lazyload.$once('loaded', function ({ el, src }) {
console.log(el, src)
})
vm.off
If only the event is provided, remove all listeners for that event
Example
function handler ({ el, src }, formCache) {
console.log(el, src)
}
vm.$Lazyload.$on('loaded', handler)
vm.$Lazyload.$off('loaded', handler)
vm.$Lazyload.$off('loaded')
Performance
this.$Lazyload.$on('loaded', function (listener) {
console.table(this.$Lazyload.performance())
});
this.$Lazyload.$once('loaded', function (listener) {
console.table(this.$Lazyload.performance())
})
[原文具體api鏈接：]（https://www.npmjs.com/package/vue-lazyload](https://www.npmjs.com/package/vue-lazyload)
）
