缓存多个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（变量是固定的可以重复使用） 

    经过以上三步就可以达到和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