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获取。

替换HTML里的link

拿到了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]-->