通过base64转码解决网页背景大图加载慢的问题

最近做一个头部背景大图背景的官网,页面功能不多,开发也很快,最后上线背景大图加载总会有0.5s左右的空白,用户体验很不好,找了很多方法都没效果,最后通过base64转码解决 ,Base64是网络上最常见的用于传输8Bit字节码的编码方式之一,Base64就是一种基于64个可打印字符来表示二进制数据的方法。

具体步骤
1.HTML标签

  

虽然转码看起来代码多了很多,但是确实解决了背景大图加载慢的问题,亲测有效。
data表示取得数据的协定名称,image/gif 是数据类型名称,base64 是数据的编码方法,逗号后面就是这个image/png文件base64编码后的数据。

2.css样式

.picture{
    width: 600px;
    height: 300px;
    background-image:url(同上转码代码);

3.后台处理(import org.apache.commons.codec.binary.Base64;)

byte[] is = ...;
String s = new String(Base64.encodeBase64(is));
``
后台将图片的byte数组用base64编码后,转成字符串传递到前端放到对应位置即可。
这种加载图片的方式提升了网页的加载速度,但是浏览器不会缓存这种图片。

你可能感兴趣的:(前端)