Web 应用程序中的 Sprite-sheet 用法 (.NET MVC)答案

【问题标题】：Sprite-sheet Usage in Web Application (.NET MVC)Web 应用程序中的 Sprite-sheet 用法 (.NET MVC)
【发布时间】：2011-08-12 12:57:12
【问题描述】：

我最近刚刚部署了一个 Web 应用程序 (.NET MVC)，其中包含相当多的图像/图标（目前大约有大约 50 个单独的 .png 文件，占用大约 40KB。）我很好奇创建一个可以包含所有图像而不是多个图像的单图像精灵表的好处。

是否值得努力创建一个包含单个图像中的所有图像并按位置引用它们的精灵表？

这是否有助于解决诸如“闪烁”加载之类的问题？（图像有时会在页面的其余部分之后加载）

任何建议将不胜感激！

【问题讨论】：

【解决方案1】：

从多个图像创建单个图像精灵绝对可以加快页面加载时间并避免闪烁。我在一些项目中使用了Image Optimization Framework，效果非常好。明智地选择要放入精灵中的图像以及它们的分组方式很重要。按钮图标非常适合这项工作。仅出现在某些页面上的较大图像不应包含在 sprite 中。

【讨论】：

【解决方案2】：

我认为您可能希望使用文档顶部的一些脚本来“预加载”您的图像。这里有一个很好的讨论：

此外，您可以在页面的样式表中引用您的图标。无论哪种方式，都应该有可用的图标而不会闪烁。

【讨论】：