前端优化-图片加载

问题：

前端人员在WEB网站等可能遇到图片量大，琐碎，导致http请求量过大，目前webpack的url-loader虽然可以将图片打包生成base64，但是过多的图片也会导致打包生成的文件过大，初始加载速度缓慢，而且通常图片大于8K，会采用路径打包处理。

解决方法一：雪碧图

网上大家一致推荐使用网页雪碧图制作专家，将所有图片合成一张图片，然后采用css的background-position和with height控制切割图片位置及大小。

要合并图片：

合并后（排列可不一致）：

 

生成的css：

.icon
{
 display:block;
 background:url(icon.png)  no-repeat;
}
.icon-app-h5{
 width:500px;
 height:380px;
 background-position:0px 0px;
}
.icon-app-newMedie{
 width:300px;
 height:292px;
 background-position:-497px -300px;
}
.icon-app-person{
 width:500px;
 height:329px;
 background-position:0px -380px;
}
.icon-app-xuanzhi{
 width:299px;
 height:300px;
 background-position:-497px 0px;
}

应用（html）：

<a class="icon icon-app-newMedie" href="javascript:void(0);" target="_self"> </a>
<a class="icon icon-app-person" href="javascript:void(0);" target="_self"> </a>
<a class="icon icon-app-xuanzhi" href="javascript:void(0);" target="_self"> </a>

解决方法二：

图片懒加载，懒加载原理通常就是在图片加载完成前统一指定为一张图片，当真正图片加载完成后替换，提升用户体验。实际过程中还可以结合滚动等使用。

已Vue框架为例：

采用vue-lazyload：

1.安装： npm install vue-lazyload --save-dev

2.使用：在入口main.js 引入

import VueLazyLoad from 'vue-lazyload';

3.设置过渡图片或动画：

Vue.use(VueLazyLoad ,
 {
    loading:'../static/images/ttp.gif'.
  }
)

         4.将原来的src换成v-lazy

<img :src="imgSrc"/>

换成

<img v-lazy="imgSrc"/>

更多参考:https://www.npmjs.com/package/vue-lazyload