vue图片懒加载

目录

1、安装

2、使用Vue.use()添加依赖

3、使用方式

---

图片懒加载其实就是在用户还未浏览到某些位置的时候就暂时不加载图片信息，以此节省带宽，减轻服务器压力以及优化用户体验，因为图片不是一次性全部加载完，故网页的加载速度会提升很多（前提是数据量比较大）。

图片懒加载实际上就是使用html5的自定义属性data-xx，将图片src路径存储在该属性中，需要加载的时候再将数据替换到src路径中。

在vue项目中有一个依赖可以轻松实现图片懒加载，vue-lazyload，Gitee仓库链接在这

1、安装

关于这个依赖在vue项目中的使用，首先自然是安装，我使用脚手架安装的，轻松

安装完了自然是要在vue项目中使用，

2、使用Vue.use()添加依赖

在main.js中导入vue-lazyload并使用它

import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload);

3、使用方式

原来的代码（示例）

<ul>
    <li class="lists" v-for="(v,i) in lists" :key="i">
       <a :href="v.url">
          <img :src="v.imgsrc" width="150" height="150">
       </a>
       <label>
          <b class="discount">{{v.source}}</b>
          <span class="price-text">{{v.title}}</span> 
        </label>            
     </li> 
</ul> 

将img标签的src修改成v-lazy

<ul>
    <li class="lists" v-for="(v,i) in lists" :key="i">
       <a :href="v.url">
          <img v-lazy="v.imgsrc" src="@/assets/img/loading.gif" width="150" height="150">
       </a>
       <label>
          <b class="discount">{{v.source}}</b>
          <span class="price-text">{{v.title}}</span> 
        </label>            
     </li> 
</ul> 

后面还有一个src那是用来当加载动画的