Vue图片懒加载

什么是懒加载？

通俗讲 : 懒加载就是延时加载，即当需要用到的时候再去加载。

那什么叫做需要用到的时候？

比如一个图片在没有出现在可视区域内，就已经加载在页面里了，但只有滚动条滚动到下面才可以看到，则认为这个图片加载“过早”了。

懒加载的优点

1. 可以减少首页首次加载的数量，减少服务器压力。
2. 当网络请求较慢，可以先使用一张低像素图占位，不至于出现大量空白，用户体验更好。

懒加载的原理

先将img标签中所有的src指向同一张空白图片（Loading图片）。将其真正的图片地址存储在自定义属性（比如data-src）中，当滚动到该图片进入可视区域内，将data-src的值给到src属性，从而达到懒加载的效果。

如何实现懒加载？

这里介绍vue-lazyload插件。

1. 安装vue-lazyload

1
npm install vue-lazyload --save

2. 全局注册

1
2
3
4
5
6
7
8
9
10
main.js 文件
import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload)
// 配置项
Vue.use(VueLazyload, {
  preLoad: 1.3,
  error: 'dist/error.png',
  loading: 'dist/loading.gif',
  attempt: 1
})

因为src中的文件会被webpack编译，assets文件夹中的图片地址，会在编译过程中重命名。vue-lazyload是在main.js文件中引入，不会被webpack进行编译，因此vue-lazyload无法获得正确的图片地址，所以直接写相对地址就无法获取到图片正确地址。

3.loading的图片样式

1
2
3
4
5
6
img[lazy="loading"]{
  display:block;
  width:50px !important;
  height:50px !important;
  margin:0 auto;
  }

4. 使用v-lazy替代src

1
2
3
4
5
6
7
<div class="lazyLoad">
    <ul id="container">
      <li v-for="img in arr">
        <img v-lazy="img.thumbnail_pic_s">
      </li>
    </ul>
  </div>

避坑：

如果有翻页功能，每一页都是请求的数据渲染的。会发现页面其他部分都变了，图片没有变。是因为组件被重复使用，需要给img增加key，来标识组件的唯一性。

1
<img v-lazy="img.thumbnail_pic_s" :key="img.src">

• Previous
  将自己的vue组件发布为npm包
• Next
  openDrive概述