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

Posted 2023-03-25

【中文标题】Web 应用程序中的 Sprite-sheet 用法 (.NET MVC)

【英文标题】：Sprite-sheet Usage in Web Application (.NET MVC)

【发布时间】：2011-08-12 12:57:12

【问题描述】：

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

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

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

任何建议将不胜感激！

【参考方案1】：

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

【参考方案2】：

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

How does the javascript preloading work?

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

【讨论】：

图标目前都在应用程序的样式表中引用，这就是为什么我觉得遇到“闪烁”很奇怪。

好吧，糟了，我以为浏览器会加载图像，但我想我错了。

工作表中的图标应该在第一次引用时全部加载。

没什么大不了的 - 我很欣赏这个答案 :) 认为这对某些人来说会是一个更有趣的问题，但我想我有点错了 :)