最有效的方式来显示Javascript游戏的卡片图像

Question

如果我有一些Javascript游戏的卡片图像，那么显示这些图像的最有效方法是什么？ 是否最好只使用相同的图像URL创建一个新对象？ 我应该预加载所有图像然后隐藏它们并克隆图像对象的实例吗？ 还有另一种方法吗？

Answer 1

我所做的选项称为CSS Spriting。基本上，您所做的是将所有图像合并为一个大图像，然后使用CSS通过设置width和left属性来显示所需的图像。优点是所有图像都是一次加载的，因为它只是一个大图像。

Answer 2

将它们全部预加载是一个好主意，因此即使第一次请求它们，它们也会毫不拖延地显示出来。确保它们在用户端缓存。

您是否考虑过为图像使用CSS-Sprite？这可能会加快速度，因为你不必为52个不同的图像请求标题。你可以连续放13张牌，每套4张牌，然后根据每张牌调整background-position，你就可以保证，一旦一张牌加载，他们就全部装满了。 / p>

Answer 3

• 当然预加载它们。
• 尽可能使用精灵，例如，您可以在一个图像中加载每个套装。然后你可以加载每张卡作为div的背景。
• 只要您从同一网址加载图片即可。浏览器应该使用客户端本地缓存的文件，而不是从服务器请求它。
• 克隆应该是好的，但它必须是一个深层克隆，否则操纵一个将影响所有其他克隆。

Answer 4

至于显示它们的最有效方式：可能替换泛型img元素的“src”属性。 至于预加载：可能是一个好主意。你需要做的就是预加载图像就像

var preloadImg = new Image();
preloadImg.src = "blah";

将它加载到缓存中，你就可以了。