vue-lazyload

Vue – the lazyload plugin for lazy loading of the vue project pictures NPM address: www.npmjs.com/package/vue…

Vue – the lazyload installation

Install via NPM

npm install vue-lazyload –save-dev

Import and use through CDN

<script src="https://unpkg.com/vue-lazyload/vue-lazyload.js"></script>
Copy the code

Vue – the lazyload use

inmain.jsIn the
Vue / / in the lazyload
import VueLazyload from 'vue-lazyload'
/ / to use vue - the lazyload
Vue.use(VueLazyload, {
	// The image is displayed when the image fails to load
	error: require('./assets/img/error.jpg'), 
	// The image is displayed while the image is loading
  	loading: require('./assets/img/loading.jpg')})Copy the code

Configuration parameters:

Use in required components

Change the: SRC attribute that requires lazy loading of images to V-lazy

<div v-for="(item, index) in imgList" :key='index'>
  <img v-lazy="item.src">
</div>
Copy the code

If it is a local relative path image, use require() to introduce the image

<img v-lazy="require('.. /.. /assets/img/banner.jpg')">
Copy the code

Need lazy loading background image

<div v-lazy:background-image="require('.. /.. /assets/img/bg.jpg')"></div>
Copy the code