Vue-Lazyload
See demo: hilongjw. Making. IO/vue – lazyloa…
Vue module for lazyloading images in your applications. Some of goals of this project worth noting include:
- Be lightweight, powerful and easy to use
- Work on any image type
- Add loading class while image is loading
- Supports both of Vue 1.0 and Vue 2.0
- Vue: ^ 1.0.0 or ^ 2.0.0
Install
From npm:
$ npm install vue-lazyload --save
Copy the code//main.js import Vue from 'Vue' import App from './ app. Vue '// Supports both of Vue 1.0 and Vue 2.0 import VueLazyload From 'vue-lazyLoad' vue. use(VueLazyload) // with options vue. use(VueLazyload, {preLoad: 1.3, error: 'dist/error.png', loading: 'dist/loading.gif', attempt: 1 }) new Vue({ el: 'body', components: { App } })Copy the code
Copy the codeAPI
Basic
vue-lazyload will set this img element’s src with imgUrl string
data: {
imgUrl: 'http://xx.com/logo.png' // String
}Copy the code
Copy the code
or Object
data: {
imgObj: {
src: 'http://xx.com/logo.png',
error: 'http://xx.com/error.png',
loading: 'http://xx.com/loading-spin.svg'
}
}Copy the codeCopy the codeElemet with background-image
Copy the codeCustomer scrollable element
-
Copy the code
-
Copy the codeOptions
| params | type | detail |
|---|---|---|
| preLoad | Number | proportion of pre-loading height |
| error | String | error img src |
| loading | String | loading img src |
| attempt | Number | attempts count |
| listenEvents | Array | events that you want vue listen for. Desired Listen Events |
CSS state
Copy the code
loading, loaded, error
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*/
}
Copy the codeInstance Methods
Arguments:
{string} event{Function} callback
vm.$Lazyload.$on('loaded', function ({ bindType, el, naturalHeight, naturalWidth, $parent, src, loading, error }) {
console.log(el, src)
})Copy the codevm.$Lazyload.$once(event, callback)
Listen for a custom event, but only once. The listener will be removed once it triggers for the first time.
{string} event{Function} callback
Example
vm.$Lazyload.$once('loaded', function ({ el, src }) {
console.log(el, src)
})Copy the codeRemove event listener(s).
If only the event is provided, remove all listeners for that event
Arguments:
{string} event{Function} callback
function handler ({ el, src }) {
console.log(el, src)
}
vm.$Lazyload.$on('loaded', handler)
vm.$Lazyload.$off('loaded', handler)Copy the codeDesired Listen Events
You can configure which events you want vue-lazyload by passing in an array of listener names.
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' ] })Copy the codeThis is useful if you are having trouble with this plugin resetting itself to loading when you have certain animations and transitions taking place
Vue.use(vueLazy, {preLoad: 1.3, error: 'dist/404. PNG ', loading: 'dist/ loading-spin-. SVG ', adapter: { loaded (listender, Init) { console.log('loaded') }, loading (listender, Init) { console.log('loading') }, error (listender, Init) { console.log('error') } }, filter: { webp ({ src }) { const isCDN = /qiniudn.com/ if (isCDN.test(src)) { src += '?imageView2/2/format/webp' } return src } }})Copy the codeElement Adapter
Vue.use(vueLazy, {preLoad: 1.3, error: 'dist/404. PNG ', loading: 'dist/ loading-spin-. SVG ', adapter: { loaded ({ bindType, el, naturalHeight, naturalWidth, $parent, src, loading, error, Init }) { // do something here console.log('loaded') }, loading (listender, Init) { console.log('loading') }, error (listender, Init) { console.log('error') } } })Copy the code- hilongjw
- imcvampire
- darrynten
- biluochun
- whwnow
- Leopoldthecoder
- michalbcz
- blue0728