如何在就绪功能中加载图像和缓存答案

【问题标题】：How to load images and cache in ready function如何在就绪功能中加载图像和缓存
【发布时间】：2011-08-18 06:53:21
【问题描述】：

我已经开发了类似小部件的 LCD 显示屏，我有 10 位数字图像，并且对于显示的每个数字（最多 6 个）我都有，单击时我会更改 div 上的图片（jquery attr('src','url')。我的问题是如何在就绪功能中加载所有这 10 个图像？如果连接缓慢（它第一次闪烁），我需要避免闪烁？

【问题讨论】：

【解决方案1】：

最好的方法是创建一个“精灵”。

sprite 是一张将所有这些数字堆叠在一起的图像，然后您将根据您想要的数字应用不同的background-position。

您可以使用spriteme.org 来帮助您创建精灵。

这是我前段时间为我的一个项目制作的：

【讨论】：

【解决方案2】：

jQuery preload 可以。当然精灵（见@Joseph Silber 的回答）是一个“更专业”的选择，但需要更多的工作。

【讨论】：

【解决方案3】：

将所有图像放在某种隐藏的 div 中

<div style="display:none;">
    <img src="a.png"/>
    <img src="b.png"/>
    <img src="c.png"/>
</div>

这应该确保加载图像。

【讨论】：