1. Vue lazyload plugin:
Plugin address: https://github.com/hilongjw/vue-lazyload
demo:http://hilongjw.github.io/vue-lazyload/
2. Simple usage example:
This plug-in is quite easy to use, but I feel that the development documentation of this plug-in is a bit too long-winded. All the api extensions are listed in one go, and there is no running instance provided in the source code.
In fact, this plug-in is very simple to use, but if you look at the official documentation, you will be misled. You can click the example below to implement a simple reference, and then expand it according to the development documentation.
1. Install the plugin:
npm install vue-lazyload --save-dev
2. Main.js introduces the plugin:
import VueLazyLoad from 'vue-lazyload' Vue.use(VueLazyLoad,{ error:'./static/error.png', loading:'./static/loading.png' })
3. In the vue file, change the image binding v-bind:src that needs to be lazy loaded to v-lazy
<img class="item-pic" v-lazy="newItem.picUrl"/>
3. Function expansion:
The simple effect of image lazy loading has been realized, and then it can be extended according to the api of this development document:
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 (number of attempts to load images) | 3 |
Number |
listenEvents |
events that you want vue listen for (vue events you want to listen to) The default ['scroll'] can be omitted, When the plugin conflicts with events such as animations or transitions in the page, Other options can be tried |
|
Desired Listen Events |
adapter |
dynamically modify the attribute of element (Dynamic modification of element attributes) |
{ } |
Element Adapter |
filter |
the image's listener filter (dynamically modify the image address path) | { } |
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 |
1. Vue lazyload plugin:
Plugin address: https://github.com/hilongjw/vue-lazyload
demo:http://hilongjw.github.io/vue-lazyload/
2. Simple usage example:
This plug-in is quite easy to use, but I feel that the development documentation of this plug-in is a bit too long-winded. All the api extensions are listed in one go, and there is no running instance provided in the source code.
In fact, this plug-in is very simple to use, but if you look at the official documentation, you will be misled. You can click the example below to implement a simple reference, and then expand it according to the development documentation.
1. Install the plugin:
npm install vue-lazyload --save-dev
2. Main.js introduces the plugin:
import VueLazyLoad from 'vue-lazyload' Vue.use(VueLazyLoad,{ error:'./static/error.png', loading:'./static/loading.png' })
3. In the vue file, change the image binding v-bind:src that needs to be lazy loaded to v-lazy
<img class="item-pic" v-lazy="newItem.picUrl"/>
3. Function expansion:
The simple effect of image lazy loading has been realized, and then it can be extended according to the api of this development document:
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 (number of attempts to load images) | 3 |
Number |
listenEvents |
events that you want vue listen for (vue events you want to listen to) The default ['scroll'] can be omitted, When the plugin conflicts with events such as animations or transitions in the page, Other options can be tried |
|
Desired Listen Events |
adapter |
dynamically modify the attribute of element (Dynamic modification of element attributes) |
{ } |
Element Adapter |
filter |
the image's listener filter (dynamically modify the image address path) | { } |
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 |