如何在ready函数中加载图像和缓存

Question

我开发了像小工具一样的液晶显示器，我有10位数的图像和显示的每个数字（最多6个）我有点击我在div上更改图片（jquery attr（'src'，'url'）。我的问题是如何在准备好的功能中加载所有这10个图像？如果连接速度慢（我第一次闪烁），我需要避免闪烁吗？

Answer 1

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

精灵是一个堆叠了所有这些数字的单个图像，然后您将根据所需的数字应用不同的background-position。

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

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

Answer 2

jQuery preload会这样做。当然精灵（参见@Joseph Silber的答案）是一个“更专业”的选择，但需要更多的工作。

Answer 3

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

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

这应该确保加载图像。