优化_图片懒加载

最新推荐文章于 2024-08-06 02:24:03 发布

Ethereal霄

最新推荐文章于 2024-08-06 02:24:03 发布

阅读量1.1k

点赞数 1

分类专栏： vant vue2+vue3 头条项目经验文章标签： vue.js 前端

本文链接：https://blog.csdn.net/m0_65812066/article/details/128640565

版权

vue2+vue3 同时被 3 个专栏收录

23 篇文章 0 订阅

订阅专栏

头条项目经验

13 篇文章 0 订阅

订阅专栏

vant

3 篇文章 0 订阅

订阅专栏

目标

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

步骤

vant组件库里有个叫LazyLoad指令, 在main.js中全局注册
```
import { Lazyload } from 'vant';

Vue.use(Lazyload);
```
使用：对于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