jquery - 在页面中包含所有 CSS Sprite 类

Question

我已将 FamFamFam Silk 图标设置为 sprite，我想在 HTML 页面上显示所有图标。问题是，有 1000 个图标分成 2 个 .png 图像，每个图像都有自己的类。例如，第一个图标是 class="silk1 ad-accept"，第二个 .png 图像中的最后一个图标是 class="silk2 ad-zoom-in “。无论如何，尝试全部手工完成这些都是疯狂的，更不用说花费的时间和可能的错误了。

我的问题是，这可以用 jQuery 自动完成吗？基本上，我需要一个脚本来获取每个 CSS sprite 类，并将其应用于像 li 这样的元素。如果它还应用一个带有它使用的类的标题，那将非常有帮助，这样我就知道哪个图标是哪个了。

Answer 1

您可以使用 jQuery 的 addClass 向您想要的任何元素集添加类。方法。

$(function(){
    $(#ads li).addClass('silk1 ad-accept');
});

但是，您真的在整个站点中使用了所有 1000 个图标吗？如果您只使用几个图标，这似乎是一个很大的开销。理论上 Sprite 表现更好，因为请求更少，但 5 个 8kb 图标请求比 1 个 800k Sprite 请求快得多。您可能需要考虑的事项...