缓存多个DataURI资源 摆脱CSS Sprites图片背景位置的约束

分类:Html_Css| 发布:camnprbubuol| 查看: | 发表时间:2013/11/29

随着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(变量是固定的可以重复使用) 

    经过以上三步就可以达到和CSS Sprites一样的效果了(只用一个http请求即可下载多个图片,同时也可以设置图片缓存时间),但我们可以让每个图片按照图片的模式工作,从而摆脱了background的束缚。

    DataURI浏览器支持情况:
Firefox 2+
Opera 7.2+ - data URI必须少于4100个字符
Chrome (all versions)
Safari (all versions)
Internet Explorer 8+ - data URI必须小于32k

    附上图片转base64的php代码,仅供参考!

    <?php
$file = realpath($_GET['img']);
$pathParts = pathinfo($file);
$extName = $pathParts['extension'];
if($fp = fopen($file,"rb", 0))
{
$picture = fread($fp,filesize($file));
fclose($fp);
$img = '<img src="data:image/' . $extName . ';base64,' . base64_encode($picture) . '"/>';
file_put_contents("tmp/{$pathParts['basename']}.txt", $img);
}
?>

在线转换橙base64工具:各种文件转换成base64 - DataUrl

演示os.heimali.com(DataURI演示仅支持Webkit内核)

转自:http://t.cn/h5yltL

365据说看到好文章不转的人,服务器容易宕机
原创文章如转载,请注明:转载自郑州网建-前端开发 http://camnpr.com/
本文链接:http://camnpr.com/html-css/datauri-cache.html