引言：
作为一名web前端工程师，不仅需要有过硬的开发能力，更需要有强大的用户体验意识。
可视化页面是与用户交互的直接媒介!前端工程师的价值，本人认为主要体现在交互!
概念：
1.什么是图片懒加载?
顾名思义，图片懒加载针对的对象是图片。图片是一种多媒体资源，在加载过程中会消耗较多的网络资源。
通常对于图片的优化主要是降低图片质量以保证文件足够小，要么利用base64格式进行压缩。可是这么做治标却不治本!
懒加载的核心是“懒”!也就是说，需要你的时候你给我出现，不让你出现的时候给我休眠!
2.为什么需要图片懒加载?
web资源的加载速度，不光能够影响用户体验感，还能够优化SEO，并且在一定程度上能够满足开发者的成就感。
如今的电商网站可以说是千千万万，各个大型电商网站的商品页列表数据，在一定程度上达到了海量数据的级别。
如果我们在一个页面加载过程中去请求列表数据，得到的图片数量也是比较庞大的，这对浏览器渲染带来了不小的压力。
那么，图片懒加载，就成为了缓解这种压力最适合的解决方案!并且在vue项目中，存在很方便的插件vue-lazyload可以使用。
应用：
1.安装vue-lazyload：
非常方便，只需要在vue项目中安装vue-lazyload：
npm i vue-lazyload -S
2.引入vue-lazyload：
找到项目中的main.js，引入以下代码：
1 import lazyLoad from 'vue-lazyload' /* 引入vue-lazyload用 */
2 Vue.use(lazyLoad); /* 注册lazyLoad */
3.简单使用vue-lazyload：
我们使用v-lazy属性进行图片引入，循环36个：
1 (img v-lazy="require('../assets/3016328129_14.jpg')" v-for="(item,index) in 36" :key="index" />
4.实现效果：
如下图，右边滑动条只有这么一点，我们往下滑动，会加长，这就是懒加载!
补充：
1.配置扩展：
我们可以配置加载中的图片和加载失败显示的图片。
Vue.use(lazyLoad, {
error: require('./assets/error.png'), //图片路径错误时加载图片
loading: require('./assets/loading.png') //预加载图片
});
还可以配置其它项
2.样式扩展：
/* 加载时 */img[lazy="loading"] {
width: 373px;
height: 266px;
background: #ddd;
}/* 加载失败 */img[lazy="error"] {
width: 373px;
height: 266px;
background: red;
}/* 加载后，没理解，但刚进入页面时有一瞬间是这个效果 */
img[lazy="loaded"] {
width: 373px;
height: 266px;
background: green;
}
(责任编辑：范老师)
