Lazy loading of images in Vue projects

---For pages with too many pictures, in order to speed up the page loading speed, in many cases we need to not load the pictures that do not appear in the visible area on the page, and then load them after scrolling to the visible area. This will greatly improve the page loading performance and improve the user experience.

Implementation method (using vue-lazyload plugin of vue)

1. Install the plugin

npm install vue-lazyload --save-dev

2. Introduce and use in the entry file main.js

import VueLazyload from 'vue-lazyload'

Use directly

Vue.use(VueLazyload)

or add custom options

Vue.use(VueLazyload, {
  preLoad: 1.3,
  error: 'dist/error.png',
  loading: 'dist/loading.gif',
  attempt: 1
})

3. Modify the image display mode to lazy loading (change the :src attribute directly to v-lazy)

<a href="javascript:;"><img v-lazy="'/static/img/' + item.productImage"></a>

Description of parameter options

So far, a simple image lazy loading is complete...