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)
）
作者：O螞蟻O
鏈接：https://www.jianshu.com/p/d451dc1b5232
來源：簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。