Sprite-sheet 在 Web 应用程序中的使用 (.NET MVC)
我最近刚刚部署了一个 Web 应用程序 (.NET MVC)，其中包含大量图像/图标（当前大约有大约 50 个独立的 .png 文件，占用约 40KB。），我很好奇关于创建可以包含所有图像而不是多个图像的单图像精灵表的好处。
是否值得努力创建一个包含单个图像中的所有图像并按位置引用它们的精灵表？
这是否有助于解决诸如“闪烁”加载之类的问题？ （图像有时会在页面其余部分之后加载）
任何建议将不胜感激！
I just recently deployed a web application (.NET MVC) that has quite a bit of images / icons (Current there are around ~50 separate .png files taking up around 40KB.) throughout and I was curious as to the benefit of creating a single-image sprite-sheet that could contain all of the images as opposed to having multiple images.
Is it worth the effort to create a sprite-sheet that contains all of the images in a single image and refer to them by position?
Would this assist any issues such as "flickering" loading? (images can occasionally load after the rest of the page)
Any suggestions would be greatly appreciated!
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
从多个图像创建单个图像精灵肯定可以加快页面加载时间并避免闪烁。我在一些项目中使用了图像优化框架，效果非常好。不过，明智地选择要放入精灵中的图像以及它们的分组方式很重要。按钮图标非常适合这项工作。仅出现在某些页面上的较大图像不应包含在精灵中。
Creating a single image sprite from multiple images could definitely speed up page load times and avoid flickering. I have used the Image Optimization Framework in some of my projects with very good results. It is important though to wisely choose the images to be put in the sprite and the way they are grouped. Button icons are great candidates for this job. Bigger images that appear only on some pages should not be included in the sprite.
我认为您需要使用文档顶部的一些脚本来“预加载”您的图像。这里有一个很好的讨论：
JavaScript 预加载如何工作？
另外，您可以在页面样式表中引用图标。无论哪种方式，图标都应该可用且不闪烁。
I think you would want to "preload" your image(s) using some scripting at the top of the document. There is a good discussion here:
How does the javascript preloading work?
Also, you could reference your icons in your stylesheet for the page. Either way should have the icons available without flickering.