1.使用base64编码代替图片
Base64目前主要用于HTML5、移动开发等不考虑IE6的场景中。图片大小不宜超过2KB,不然编码出来的会很长。
使用方法:
或者CSS中
background-image: url(ase64编码后的字符串);
2.使用css sprite合并图片
在线css sprite:http://css.spritegen.com/
图片不宜太大
3.图片延迟加载
在我的项目中,使用的是angular框架,用的第三方插件me-lazy-load.js对界面多图进行懒加载。
使用方法:
4.使用css、svg、canvas或iconfont代替图片
CSS可以使用为元素before、after实现简单的绘图
如图:
ul.create-nav>li span:after, ul.create-nav>li span:before {
content: " ";
height: 0;
width: 0;
border-style: solid;
border-width: 20px 5px 20px 25px;
border-color: transparent;
pointer-events: none;
}
ul.create-nav>li span:before {
position: absolute;
left: 0;
border-left-color: #F3F3F4;
}
ul.create-nav>li span:after {
position: absolute;
right: -20px;
z-index: 1;
border-left-color: #D7D7D7;
}
5.加载对应尺寸
这是针对不同终端,加载符合屏幕大小的不同尺寸的图片,主要针对移动端。
6. 预加载
待续...
7.更好的图片格式
待续...