vueApp图片懒加载使用

奥佳博客（王小政）

于 2021-02-23 15:09:49 发布

阅读量417

点赞数

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.csdn.net/wang159477/article/details/113990271

vue 专栏收录该内容

15 篇文章

订阅专栏

本文介绍了如何在Vue项目中利用Vant库实现图片的懒加载功能。首先在main.js中导入并注册Vant的Lazyload模块，然后在组件中使用van-image标签，结合lazy-load属性来实现图片的延迟加载。这样可以提高网页的加载速度，优化用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue图片懒加载使用

  1.先在main.js中配置
 import { Lazyload } from 'vant' // 导入懒加载模块Lazyload
 Vue.use(Lazyload) // 注册懒加载指令

在这里插入图片描述

import { Lazyload } from 'vant' // 导入懒加载模块Lazyload
Vue.use(Lazyload) // 注册懒加载指令

在这里插入图片描述

    <van-grid :column-num="2">
  <van-grid-item v-for="(item,index) in arr"  :key="index" icon="photo-o" text="文字" >
<!-- lazy-load设置图片懒加载，是一个自定义指令 -->
 <van-image width="100%"  :src="item.pic" lazy-load/>
       <p class="p1">{{ item.title }}</p>
         <div class="one">
          <p class="p2">￥{{ item.price }}</p>
          <p><van-icon name="shopping-cart-o" /></p>
        </div>
  </van-grid-item>
</van-grid>

然后就可以实现懒加载了
在这里插入图片描述