游客

标题:缓存多个DataURI资源 摆脱CSS Sprites图片背景位置的约束
正文:
随着html5的广泛应用，为图片链接使用datauri，似乎是一个时髦，有人说，这是为了减少图片的请求数，但是datauri文件增大0.1k; 而且每次都需要解码，消耗cpu;这让手机的芯片情何以堪，为此我们可以考虑缓存这些datauri在Html5中，可以将图片经过base64编码后直接写在HTML中来展示图片，使用这种方式可以减少Http请求数量，从而可加快页面展示，同时也减少了很多对服务器的压力。 例: <img src="data:image/png;base64,iVBORw0KGgooCAMAAAC7...（此处略去N个字）...lFTkSuQmCC"/> 但这种将图片直接嵌入html中的用法，也会带来一些问题，问题一：同样的图片无法重复使用，每使用一次都要重复输出一遍图片代码，增加了html自身大小；问题二：假设html页面不做缓存（通常动态页面都会这么做），那么页面中引用的图片资源就无法缓存在浏览器中，相当于每次请求都会重新加载一遍图片。 由于存在着以上两个问题，就需要综合考虑是否值得使用DataURI的形式加载图片了。 这里也说明一下，使用CSS Sprites同样也能减少图片产生的大量http请求。由于CSS Sprites必须将图片用做背景，就会导致以下缺点，一来：修改图片很不方便；二来：经常会在html代码中包含很多空标签（只为给background提供一个展示的空间）；三来：会丧失许多图片自身的特性。 所以如果不能使用CSS Sprites，又要解决DataURI的问题，该怎么办呢？ 解决方案也很简单，第一步：建一个img.js文件，将DataURI的数据放到一个变量里，设置一下这个img.js文件的缓存时间（这段时间浏览器不会重复加载这个文件）；第二步：将多个图片逐个转成base64编码，全部放到img.js文件中；第三步：在html文件中动态创建img标签，将前面变量里的DataURI数据赋给img的src（变量是固定的可以重复使用）
[<<][[1]][2][>>]

查看评论(0)
发表评论



首页