前提概要：

一个网站首页或者频道页面，内容图片较多的时候，且变动不是太频繁，如何优化成为了难题，使用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 帧数不一样就悲剧了。

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