05月02, 2013

Fl发布将图片使用DATA URI的功能

上篇文章里介绍了使用图片的DATA URI进行优化,提到了之前实现方式的弊端,同时给出了新解决方案的思路。

目前该功能已经开发完成,集成在Fl中。你可以去https://github.com/welefen/Fl下载最新的FL代码。

如何使用

require_once "path/to/fl/Fl.class.php";
Fl::loadClass("Fl_Css_DataUri");
$instance = new Fl_Css_DataUri($cssContent);
$instance->getImgRealPath = "get_img_real_path_fn";
$options = array(
    'maxlength' => 3000 //使用DATA URI的图片最大值,如果大于这个值,则不使用DATA URI模式
);
$output = $instance->run($options);
$ie6Text = $output['ie6'];
$css3Text = $output['css3'];

其中getImgRealPath属性值为一个回调函数。Fl会自动分析css里引用的图片,同时将图片引用的地址传递给这个回调函数。回调函数返回该图片所在目录的物理地址,用于Fl去获取该图片的文件大小。

$output的内容是一个数组,分别包含了给ie6\7用的CSS和给非IE6\7用的css,分别对应为$output['ie6]和$output['css3]。

上文里还提到,如果一个图片被引用了2次会导致DATA URI后的有2份,这样直接到值CSS文件变大。

Fl本身不自动处理逻辑,但提供了一个属性可以获取当前的css文件里的图片被引用了多少次。可以通过$instance->imgNums获取。

拿到了2份CSS内容后,就可以建立的CSS文件,然后改写原来对CSS引用的link。

<!--[if (lt IE 8.0)]>
<link rel="stylesheet" href="/resource/css/index.src.css?v=0327e684.css" />
<![endif]--><!--[if (!IE)|(gte IE 8.0)]><!-->
<link rel="stylesheet" href="/resource/css/index.src_datauri.css?v=a76515b8.css" />
<!--<![endif]-->

本文链接:http://welefen.com/post/fl-produce-img-data-uri.html

-- EOF --

Comments

评论加载中...

注:如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理。