如何快速加载多张图片（没有 Css Sprites）答案

【问题标题】：How to load multiple images quickly (without Css Sprites)如何快速加载多张图片（没有 Css Sprites）
【发布时间】：2013-11-14 20:07:06
【问题描述】：

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

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

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

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

有大量的选项，所以为了避免让用户不知所措，选择区域中只显示相关的选项。例如，如果您点击红色头发，则仅显示红色发型（在用户选择相关颜色之前，所有其他发型均被隐藏）。

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

如何加快加载过程，避免延迟？

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

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

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

还有更好的选择吗？

（很遗憾，我无法提供我作品的链接）。

【问题讨论】：

我故意将此添加为评论，而不是作为答案，因为我没有一个可行的示例。我的建议是使用一种 ajax 加载器；每当有人选择“红头发”选项时，立即显示图像将出现的占位符，但使用某种加载器/gif。然后使用 javascript 来一张一张地加载图片（当然是同时加载），然后用刚刚获取的图片替换 loader gif。图片不会加载得更快，但用户不会介意，因为响应性很好！
使用 defs 和/或组，你不能把你所有的形状打包成更少的文件吗？那么拉链呢？
@giorgio 这是个好主意，谢谢！
@VincentPiel 你有什么链接可以解释什么是 Def/Groups。我在 Google 上搜索过，但我不确定那里的信息与我的用例有何关系！
svgbasics.com/defs.html 和 stackoverflow.com/questions/9116954/… 例如...我不太了解您的需求，但这可能会让您入门。

【解决方案1】：

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

【讨论】：