Using lazy loading vue-lazy in Vue projects

1. First prepare the required images and put them in: src\common\image directory

default.jpg

default.png

The purpose of lazy-loading images: When the material images in your page are not displayed, let the lazy-loaded images be displayed first.

2. Download vue-lazyload in your Vue project

cnpm install vue-lazyload --save-dev

Then, go to your configuration file package.json to see if the download is successful.

"vue-lazyload": "^1.3.3",

3. Introduce vue-lazyload in the entry file main.js

// 引入懒加载之前，先下载懒加载
// cnpm install vue-lazyload --save-dev
import VueLazyload from 'vue-lazyload';

4. Then use vue-lazyload in main.js

Vue.use(VueLazyload,{
  // 这里表示在加载时要显示的图片的路径
  loading: require('common/image/default.jpg')
})

5. Go to the corresponding view layer and change the :src attribute of the original img tag to the v-lazy instruction.

Originally this was:

<img :src="i.picUrl" alt="" />

Change it to this:

<img v-lazy="i.picUrl" alt="" />