我正在为 iPad 创建头像创建者。用户可以选择不同的发型、发色、肤色等。
该页面有两个组成部分：选择区域（所选选项显示为小缩略图）和预览区域（所选选项显示为较大）。
每个选项都保存为 SVG 文件。使用 SVG 有很多优点：
- 它在 Retina 显示器上保持清晰
- 每个资产的文件大小很小（因为图像是基于矢量的）
- 文件可以很小，但仍然允许透明
- 相同的图像可用于预览/选择区域（浏览器只是通过 CSS 缩放它们）。
Jquery 用于更改 oage 上的类 ID，这反过来会影响所调用的 CSS 代码（CSS 将 SVG 图像保存为背景图像）。
有很多选项，所以为了避免让用户不知所措，选择区域中只显示相关选项。例如，如果您点击红色头发，则仅显示红色发型（在用户选择相关颜色之前，所有其他发型均被隐藏）。
一切正常，唯一的缺点是当用户点击一个选项时，浏览器从服务器获取图像时会有延迟。
我怎样才能加快加载过程，所以没有延迟？
以下是我考虑过的一些选项：
CSS Sprites 通常 CSS sprite 会解决这个问题。然而，由于选项的范围，手动创建 CSS sprite 是不切实际的，并且没有一个自动选项支持 SVG sprite 创建。如果我切换到 PNG，文件大小会变得非常大。
不可见的加载 我创建了一个隐藏的 DIV，将我的所有图像存储为背景图像（使用 CSS3 多背景图像属性）。这样可以确保加载所有图像，以便在用户点击它们时立即显示它们。唯一的缺点是这会导致页面初始加载需要很长时间。
有没有更好的选择？
（不幸的是，我无法提供我作品的链接）。