Optimization_lazy loading of images

Target

• Images are not loaded until the image tag enters the viewport
• The image src will call the browser to request image resources

 

step

1. There is a command called LazyLoad in the vant component library, which is registered globally in main.js

   import { Lazyload } from 'vant';
   
   Vue.use(Lazyload);

2. Use: for img tag:

 Set  v-lazy the value of the directive to the image you want to lazy load.

<img v-for="img in imageList" v-lazy="img" />

export default {
  data() {
    return {
      imageList: [
        'https://img01.yzcdn.cn/vant/apple-1.jpg',
        'https://img01.yzcdn.cn/vant/apple-2.jpg',
      ],
    };
  },
};

For the van-image tag

<van-image
  width="100"
  height="100"
  lazy-load
  src="https://img01.yzcdn.cn/vant/cat.jpeg"
/>

Regarding the related configuration of Lazyload:

Vue.use(Lazyload, {
  preLoad: 0.8, // 屏幕高度的百分比0~1
  error: 'https://pic.616pic.com/ys_bnew_img/00/05/66/sHkPRGKmwl.jpg', // 当懒加载图片失败时，图片显示
  loading: 'https://img.zcool.cn/community/0141965543a14e0000019ae960570a.gif'
})

See the official document for details: https://youzan.github.io/vant/v2/#/zh-CN/lazyload