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）。这导致在显示图像之前大约200ms的延迟。为什么会发生这种情况，我该怎么办呢？

Answer 1

也许CSS精灵会帮助你。这些非常适合动画，如果你没有足够的图像编辑技能，那么就有很多免费的在线生成器。

Answer 2

您正在创建一个新的DOM对象，而不是重新使用预先获取的对象。

为每个图像添加一个ID以唯一标识它 -

<div class="animation-container"></div>
<div class="holding-container" style="display:none"></div>
<script>
    $('.holding-container').append('<img src="Image1.png" id="img1" />');
    $('.holding-container').append('<img src="Image2.png" id="img2" />');
</script>

然后使用选择器detach()抓取元素（如remove()但保留信息，如果要将其保留在保存容器中，则可省略此项），{ {1}}它到你的容器：

prependTo()

Answer 3

以下是两种可以预加载图像的方法：

Image preloader javascript that supports events

Is there a way to load images to user's cache asynchronously?

在这两种情况下，这些都会将图像预加载到缓存的图像中。然后，当您在网页中的任何其他位置使用这些图像URL时，它们将立即加载（从浏览器缓存中）。

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

3 个答案: