图片懒加载实现

一、为什么要懒加载

有时候一个网站里面会有几百张甚至几千张上万张图片，这个时候如果所有图片一起加载的话就会导致服务器压力太大了，不仅会影响页面的渲染速度也会浪费宽带。
为了解决这个问题，提高用户体验，就出现了懒加载方式来减轻服务器的压力，优先加载可视区域的内容，其他部分等进入了可视区域再加载，从而提高性能。

二实现方式

1. 安装插件

npm install vue-lazyload --save-dev

2. 在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
})

3.页面中使用

1. img

<img v-lazy="'/static/img/' + item.productImage" :key="'/static/img/' + item.productImage"> 

2. 背景图

<div style="width:100px;height:100px;" v-lazy:background-image="{src: item.imgpath}"></div>

3. v-html，如从后台获取的富文本字符串中图片:（用replace将src替换为data-src）

<div v-lazy-container="{ selector: 'img', error: 'xxx.jpg', loading: 'xxx.jpg' }">
  <img data-src="//domain.com/img1.jpg">
  <img data-src="//domain.com/img2.jpg">
  <img data-src="//domain.com/img3.jpg">  
</div>