前言
最近做一个要加载30多张图片的页面,因为图片多导致产生大量的http请求,从而影响页面的加载速度,而且有加载不出来的情况,最后利用base64解决问题。
Base64是网络上最常见的用于传输8Bit字节码的编码方式之一,Base64就是一种基于64个可打印字符来表示二进制数据的方法。
具体步骤
1.HTML标签
<img src="data:image/gif;base64,R0lGODlhDwAPAKECAAAAzMzM/
wAAACwAAAAADwAPAAACIISPeQHsrZ5ModrLlN48CXF8m2iQ3YmmKqVlRtW4ML
wWACH+H09wdGltaXplZCBieSBVbGVhZCBTbWFydFNhdmVyIQAAOw=="/>
data表示取得数据的协定名称,image/gif 是数据类型名称,base64 是数据的编码方法,逗号后面就是这个image/png文件base64编码后的数据。
2.css样式
.picture{
width: 600px;
height: 300px;
background-image:url(data:image/gif;base64,R0lGODlhCAAIAJEAAOnp6eTk5O7m8AAAACH5BAEAAAIALAAAAAAIAAgAAAINjAMJh2q6DnxOVsqmLQA7);
}
3.后台处理(import org.apache.commons.codec.binary.Base64;)
byte[] is = ...;
String s = new String(Base64.encodeBase64(is));
后台将图片的byte数组用base64编码后,转成字符串传递到前端放到对应位置即可。
后记
这种加载图片的方式提升了网页的加载速度,但是浏览器不会缓存这种图片。