Use the vue-lazyload plug-in to lazily load images in vue-JS Tutorial-php.cn

Use the vue-lazyload plug-in to lazily load images in vue

小云云

Release： 2018-01-04 09:40:46

Original

2686 people have browsed it

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

Copy after login

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>

Copy after login

Usage

main.js in the entry file

import Vue from &#39;vue&#39;
import App from &#39;./App.vue&#39;
import VueLazyload from &#39;vue-lazyload&#39; //引入这个懒加载插件

Vue.use(VueLazyload)

// 或者添加VueLazyload 选项
Vue.use(VueLazyload, {
 preLoad: 1.3,
 error: &#39;dist/error.png&#39;,
 loading: &#39;dist/loading.gif&#39;,
 attempt: 1
})

new Vue({
 el: &#39;body&#39;,
 components: {
  App
 }
})

Copy after login

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>

Copy after login

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>

Copy after login

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: &#39;dist/error.png&#39;,
 loading: &#39;dist/loading.gif&#39;,
 attempt: 1,
 // the default is [&#39;scroll&#39;, &#39;wheel&#39;, &#39;mousewheel&#39;, &#39;resize&#39;, &#39;animationend&#39;, &#39;transitionend&#39;]
 listenEvents: [ &#39;scroll&#39; ]
})

Copy after login

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!