如何快速加载多个图像（没有Css Sprites）

Question

我正在为iPad创建一个头像创建者。用户可以选择不同的发型，发色，肤色等。

该页面有两个组成部分：选择区域（所选选项显示为小缩略图）和预览区域（所选选项显示较大）。

每个选项都保存为SVG文件。使用SVG有许多优点：

1. Retina显示屏仍然很清晰
2. 每个资产的文件大小很小（因为图像是基于矢量的）
3. 文件可以是小文件，但仍然允许透明度
4. 相同的图像可用于预览/选择区域（浏览器只是通过CSS缩放它们）。

Jquery用于更改oage上的类ID，这反过来影响调用的CSS代码（CSS将SVG图像保存为背景图像）。

存在大量选项，因此为了避免压倒用户，仅在选择区域中显示相关选项。例如，如果点击红色头发，则仅显示红色头发样式（所有其他头发样式均隐藏，直到用户选择相关颜色）。

一切正常，唯一的缺点是，当用户点击一个选项时，浏览器会从服务器获取图像时出现延迟。

如何加快加载过程，所以没有延迟？

以下是我考虑的一些选项：

CSS Sprites 通常CSS精灵会解决这个问题。但是，由于选项的范围，手动创建CSS sprite是不实际的，并且没有一个自动选项支持SVG sprite创建。如果我切换到PNG，文件大小将变得非常大。

无形加载 我创建了一个隐藏的DIV，将我的所有图像存储为背景图像（使用CSS3多个背景图像属性）。这样可以确保加载所有图像，以便在用户点击它们时可以立即显示。唯一的缺点是这会导致页面在初始加载时花费很长时间。

还有更好的选择吗？

（不幸的是，我无法提供我工作的链接）。

Answer 1

我最终这样做的方法是创建一个DIV，将我的所有图像作为CSS3多个背景附加。然后我将DIV设置为display：none。这会在页面加载时加载所有图像。