引言：

做为一名web前端工程师，不只须要有过硬的开发能力，更须要有强大的用户体验意识。html

可视化页面是与用户交互的直接媒介！前端工程师的价值，本人认为主要体如今交互！前端

概念：

1.什么是图片懒加载？

顾名思义，图片懒加载针对的对象是图片。图片是一种多媒体资源，在加载过程当中会消耗较多的网络资源。vue

一般对于图片的优化主要是下降图片质量以保证文件足够小，要么利用base64格式进行压缩。但是这么作治标却不治本！web

懒加载的核心是“懒”！也就是说，须要你的时候你给我出现，没到你表现的时候给我休眠！npm

2.为何须要图片懒加载？　　　　

web资源的加载速度，不光可以影响用户体验感，还可以优化SEO，而且在必定程度上可以知足开发者的成就感。浏览器

现在的电商网站能够说是千千万万，各个大型电商网站的商品页列表数据，在必定程度上达到了海量数据的级别。网络

若是咱们在一个页面加载过程当中去请求列表数据，获得的图片数量也是比较庞大的，这对浏览器渲染带来了不小的压力。前端工程师

那么，图片懒加载，就成为了缓解这种压力最适合的解决方案！而且在vue项目中，存在很方便的插件vue-lazyload可使用。less

应用：

1.安装vue-lazyload：

很是方便，只须要在vue项目中安装vue-lazyload：　优化

npm i vue-lazyload -S

2.引入vue-lazyload：

找到项目中的main.js，引入如下代码：

import lazyLoad from 'vue-lazyload' /* 引入vue-lazyload用 */
Vue.use(lazyLoad);　　/* 注册lazyLoad */

3.简单使用vue-lazyload：

咱们使用v-lazy属性进行图片引入，循环36个：

<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') //预加载图片
});

还能够配置其它项，如下是参考文档：https://www.w3cschool.cn/vantlesson/vantlesson-tsou35w1.html

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;
}

 原创地址：http://www.noobyard.com/article/p-zmufjuwq-me.html