Home  >  Article  >  Web Front-end  >  Use the vue-lazyload plug-in to lazily load images in vue

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

小云云
小云云Original
2018-01-04 09:40:462664browse

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

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: &#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; ]
})

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn