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

##demo: Lazy loading case demo

Installation Installation method

npm

$ 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>

Usage

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
 }
})

After the entry file is added, you can directly use the img anywhere in the component: src -> v-lazy

 <p class="pic">
  <a href="#" rel="external nofollow" rel="external nofollow" ><img :src="&#39;/static/img/&#39; + item.productImage" alt=""></a>
</p>

Change the :src attribute in the img tag in the previous project to v-lazy

##

 <p class="pic">
  <a href="#" rel="external nofollow" rel="external nofollow" ><img v-lazy="&#39;/static/img/&#39; + item.productImage" alt=""></a>
</p>

Parameter option description

keydescriptiondefaultoptionspreLoadproportion of pre-loading height1.3NumbererrorWhen loading the image fails'src'StringloadingWhen the image is loaded successfully'src'StringattemptAttempt count3NumberlistenEventsEvents you want to listen to['scroll', 'wheel', 'mousewheel', 'resize', 'animationend', 'transitionend', 'touchmove']Desired Listen EventsadapterDynamic modification of element attributes{ }Element AdapterfilterImage listener or filter{ }Image listener filter lazyComponentlazyload componentfalseLazy ComponentdispatchEventTrigger dom eventfalseBooleanthrottleWaitthrottle wait200Numberobserveruse IntersectionObserverfalseBooleanobserverOptionsIntersectionObserver options{ rootMargin: '0px', threshold: 0.1 }IntersectionObserverEvents you want to listen for

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

Related recommendations:

Image lazy loading imgLazyLoading.js detailed explanation

How to use IntersectionObserver to implement image lazy loading

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!