当前位置: 代码迷 >> HTML/CSS >> 对网站运用css sprite 技术自动化实施方式的探讨
  详细解决方案

对网站运用css sprite 技术自动化实施方式的探讨

热度:483   发布时间:2012-06-20 20:37:21.0
对网站应用css sprite 技术自动化实施方式的探讨

前提概要:

一个网站首页或者频道页面,内容图片较多的时候,且变动不是太频繁,如何优化成为了难题,使用CSS SPRITE功能能实现多个图片合并到一起进行加载的方法,但这种需要前端人员对图片位置和CSS 进行手动调节,改变HTML结构,异常繁杂,这就是为什么很多网站现在还没有使用的原因。

本人一直在考虑如何将这一流程变得自动化,简便易操作,让前端人员改变更少的代码的情况下 自动完成这个流程,经过一段时间的思考和资料翻阅,整理出一种个人觉得可行的方式,给大家梳理下,当然这并不是最终方法,还需要更多人来进行流程优化。

 

面临问题:

1、图片自动合并问题

2、CSS 样式如何生成,生成锲机(也就是什么时候生成最为合适),如何关联,并且设置偏移量

3、是否需要修改原HTML代码,需要修改的话如何修改,什么时候改。

4、在图片大小不同,类型不同的情况下,如何进行有效的和服务端参数传递和偏移量计算。

5、如何在修改原HTML最少的情况下、在如CMS 配置等非专业人员下可以灵活操作,不会因为不懂技术而出现错误的情况。

6、服务端用什么方式来支持,是采用服务端webserver解析HTML的方式,还是使用PHP等语言来执行,编译后再组装HTML。

7、应该还有。。。

 

针对上述问题我的思路:

1、也许这个是最好解决的问题了,使用php或者nginx c模块,按照传递过来的多个图片参数合并原有的图片,按照顺序即可。可以使所有图片全部横向或者纵向排列,这样方便在css中直接设置x 或者y坐标的偏移量即可,偏移量即为上一个图片的高度或者宽度。考虑到性能问题,这个图片可以加到缓存中,或者直接生产对应的静态文件,请求过来的时候先判断静态文件是否存在,存在即返回,不存在再生成。

2、动态生成css,当然参数也包含上述的多个图片的参数,按照图片的位置,生成对应的CSS。(由于css的在浏览器中加载优先级高,造成很多方案无法实现。在解决方案中再赘述如何和图片进行关联)。

3、为啥要修改html 因为正常的html是:<img src=xxx.jpg> ,css sprite是<div style='background:url'>,这种方式,两者没有兼容的表示方式。若不需要修改源代码,则必须在dom解析完成html之后来执行(因为正常的 <img src=xxx.jpg> 这个标签是解析完就开始执行,并且在document.onload事件前就执行完成),虽然大部分浏览器都有兼容的实现方法,不过我觉得还是不太靠谱,故我的想法是必须要提前修改好HTML。

4、这个问题我觉得多加点参数就能解决问题,就是繁杂些,看有没有其他好一些的方式。

5、下面几个问题在解决方案里涉及。

 

我个人觉得可行性稍大的解决方式:(流程较多,每一部分解决方案都不太同)

步骤1、略过开始就生成合并的图片,直接在动态调用css里的方法里生成。

如在html的header里直接

<link href=http://xxxx.php?imgids=1,2,3,4,5,6,7 rel="stylesheet" type="text/css" media="screen">

在这个php里,主要做2件事,一个就是根据图片ID (你传图片路径也可以,根据自己的业务来选择)获得实际图片,并获得图片的大小,在对应的位置生成改组ID对应的合并图片文件。第二件事就是根据上述数据,生成对应的css内容,返回给页面,内容格式如下:


这样这个css 这个页面就可以使用了。 有人问,怎么让各个div使用不同的class样式呢。我的想法是:在document.onload事件里,用js 循环要设置的对象,用js来给他设置className即可;或者呢,直接使用下面步骤2的方式直接赋值。

步骤2、解决html代码改变的问题

最好的思路我觉得就是在nginx 里增加一个c模块,该模块的功能就是获取到需要变更代码块,该代码块可以用标签定义,或者也可以使用正则来匹配。开启该模块后,自动将html代码转换成上述结构使用的代码。

配置模块:

或者使用php的预执行方式,生成对应的代码。若在CMS中可以配置这样的标签来实现功能。

实际网站情况比较复杂,大部分网站可以不涉及步骤2,直接在页面输出对应的代码即可,步骤2适合前端结构较复杂的情形。这种解决方案适合图片更换频率不是太高的情况,当然个人觉得性能不是问题,大部分时间都可以用上缓存,当然要说不支持GIF了,不符合逻辑,各个gif 帧数不一样就悲剧了。

暂时能想到的就是这些,网上暂时还没查到更具体的解决方案,其他人可以帮我补充或者修改,希望能帮助部分有这样需求的网站,欢迎大家吐槽。