Home > Article > Web Front-end > Use the vue-lazyload plug-in to lazily load images in vue
This article mainly introduces a detailed guide to using the vue-lazyload plug-in to lazily load images in vue. It has certain reference value. Interested friends can refer to it. I hope it can help everyone.
Detailed guide on using image lazy loading in vue, share with everyone. The details are as follows:
Instructions
When the network request is relatively slow, add a placeholder image with a lower pixel to this image in advance, so as not to Stack them together, or display a large blank space to make the user experience better.
Case
Installation Installation method
$ npm i vue-lazyload -D
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 in the entry file
import Vue from 'vue' import App from './App.vue' import VueLazyload from 'vue-lazyload' //引入这个懒加载插件 Vue.use(VueLazyload) // 或者添加VueLazyload 选项 Vue.use(VueLazyload, { preLoad: 1.3, error: 'dist/error.png', loading: 'dist/loading.gif', attempt: 1 }) new Vue({ el: 'body', components: { App } })
<p class="pic"> <a href="#" rel="external nofollow" rel="external nofollow" ><img :src="'/static/img/' + item.productImage" alt=""></a> </p>
<p class="pic"> <a href="#" rel="external nofollow" rel="external nofollow" ><img v-lazy="'/static/img/' + item.productImage" alt=""></a> </p>
Parameter option description
default | options | ||
---|---|---|---|
1.3 | Number | error | |
'src' | String | loading | |
'src' | String | attempt | |
3 | Number | listenEvents | |
['scroll', 'wheel', 'mousewheel', 'resize', 'animationend', 'transitionend', 'touchmove'] | Desired Listen Events | adapter | |
{ } | Element Adapter | filter | |
{ } | Image listener filter | lazyComponent | |
false | Lazy Component | dispatchEvent | |
false | Boolean | throttleWait | |
200 | Number | observer | |
false | Boolean | observerOptions | |
{ rootMargin: '0px', threshold: 0.1 } | IntersectionObserver |
You can configure the event you want to use vue - lazyload by passing an array
The name of the listener.
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' ] })
This is useful if you have trouble reloading with this plugin
Image lazy loading imgLazyLoading.js detailed explanation
How to use IntersectionObserver to implement image lazy loading
The above is the detailed content of Use the vue-lazyload plug-in to lazily load images in vue. For more information, please follow other related articles on the PHP Chinese website!