一、为什么要懒加载
有时候一个网站里面会有几百张甚至几千张上万张图片，这个时候如果所有图片一起加载的话就会导致服务器压力太大了，不仅会影响页面的渲染速度也会浪费宽带。
为了解决这个问题，提高用户体验，就出现了懒加载方式来减轻服务器的压力，优先加载可视区域的内容，其他部分等进入了可视区域再加载，从而提高性能。
二实现方式
- 安装插件
npm install vue-lazyload --save-dev
- 在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.页面中使用
- img
<img v-lazy="'/static/img/' + item.productImage" :key="'/static/img/' + item.productImage">
- 背景图
<div style="width:100px;height:100px;" v-lazy:background-image="{src: item.imgpath}"></div>
- 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>
