我最近开始使用图像精灵,它们绝对非常适合减少http请求.有没有一点成为不好的做法？

我特别想到必须添加许多额外标记来支持它们.例如,使用它们作为列表项目符号点,我必须添加两个或三个额外的跨度来获取所有对齐的内容等.

这也是令人讨厌的一点,你不能使用重复的图像,所以总是在作为精灵的一部分的一个大图像或用于重复下载的微小的1像素图像之间折腾.

我真的在寻找关于使用精灵的任何其他一般考虑因素/指南的概述.

最佳答案 它们通常会导致移动设备出现性能问题.我不是100％肯定为什么(从来没有真正深入研究过这个问题),但我认为这是因为移动webkit正在为页面上的每个实例将一个相对较大的图像的新副本加载到内存中.由于移动设备通常具有非常少量的RAM,因此很快就会导致页面速度变慢.

我曾经遇到过这个问题,之前一次在一个页面上有大约300个“图标”精灵,每个精灵从一个包含大约50个不同图标的精灵图像中拉出来.回到每个图像一个图标的“正常”方法(或悬停状态为2-3)解决了该特定页面上的性能问题.

此外,当您稍微调整页面内容的大小时(例如,在浏览器本身上使用“放大/缩小”),许多浏览器(移动设备和其他浏览器)通常不会100％尊重精灵的剪辑.您经常会在想要使用的精灵旁边看到精灵的一小部分.

至于你的子弹示例,你不应该需要多于一个div / span.你可以在li上设置一个margin-left,并将你的“bullet div”放在它创建的空白区域.

话虽这么说,我一直使用精灵,因为它们很方便,只要注意它们的一些问题.一般来说,我有sprites.png,sprites_h.png和sprites_v.png用于水平和垂直重复的部分.