javascript - 如何在不查询服务器的情况下将图像调用到 DOM 中？

Question

给定许多图像(动画帧)，我想预取它们，然后根据需要将它们显示在网页上。

我尝试了多种预取方式，包括a nifty plugin ，但这是一个非常简单的方法:

<div class="animation-container"></div>

<div class="holding-container" style="display:none"></div>

<script>
$('.holding-container').append('<img src="Image1.png" />');
$('.holding-container').append('<img src="Image2.png" />');
</script>

在 Firebug 或开发人员工具的“网络”选项卡中，我看到这些调用导致对服务器的查询，并且图像已成功获取。

现在，我想实际使用这些图像。这是一些非常简化的代码:

$('.animation-container').prepend('<img src="Image1.png"/>');

这就是事情偏离轨道的地方。网络选项卡显示浏览器再次查询服务器(收到 304 NOT MODIFIED)。这会导致图像显示前出现大约 200 毫秒的延迟。为什么会发生这种情况？我该怎么办？

Answer 1

也许 CSS Sprite 会帮助你。这些对于动画来说非常有用，如果您没有足够的图像编辑技能，可以使用一大堆免费的在线生成器。