优化_图片懒加载

目标

• 图片标签进入视口才加载图片
• 图片src会调用浏览器请求图片资源

 

步骤

1. vant组件库里有个叫LazyLoad指令, 在main.js中全局注册

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

2. 使用：对于img标签：

 将 v-lazy 指令的值设置为你需要懒加载的图片。

<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',
      ],
    };
  },
};

对于van-image标签

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

关于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'
})

具体看官方文档：https://youzan.github.io/vant/v2/#/zh-CN/lazyload