Question

我正在做一个显示许多小图标的网站（星星，旗帜，文件夹......）

现在我正在使用CSS精灵技术，但效果很好，但很难保持。

我正在考虑制作一个大的.js文件，所有图像都编码为javascript变量。然后以这种方式显示图像：

images.js

var myimage1 = 'data:image/png;base64,iVBORw0KGgoAAAANS...';
var myimage2 = 'data:image/png;base64,cB324CD64aB3Cme23...';

html代码

<script type=text/javascript src=images.js></script>
....
<img src="javascript:myimage1">
<img src="javascript:myimage2">

我知道.js文件会更大，但它很容易维护，并且会被浏览器缓存。

这是一个好主意还是坏主意？这是跨浏览器吗？

Answer 1

留下CSS精灵。如果您的用户禁用了JavaScript，则他们将无法看到图片。

Answer 2

如果您决定 坚持使用CSS sprites （例如，因为您需要IE6 / 7支持，或者担心没有JS后备），那么有些事情这可能有助于维护：

根据形状将精灵组织成单独的图像。例如，将所有20x20徽章放在同一个精灵中，将所有30x15文件夹放在另一个精灵中。（是的，您将有更多的HTTP请求，但HTTP性能是要考虑的许多因素之一。）这使得计算CSS 更多更简单。您可以将精灵设置为单列，双列（这对于翻转效果很有用）或任何保持最干净的事物。处理一个大的，不规则的精灵是一种痛苦！
添加新图像的影响较小的模式。例如，始终将新项目添加到底部，因此您无需在新图像上方重新计算CSS图像。（如果你按照我的第一点组织精灵，这才真正有意义。）
如果您不再使用精灵，只需将其删除即可。在旧点留下白色空格或灰色x或其他东西。然后，当你有时间和一堆被删除的图像清理时，一次完成所有操作。（同样，如果你对性能感到疯狂，你可能不喜欢在这些文件中留下任何备用字节......）

只是一些想法。

Answer 3

我会说这是一个坏主意，因为如果用户禁用了JavaScript，您的图像都不会出现。雅虎估计约有2％的访问者不使用JavaScript (source)