0

给定一些图像（动画帧），我想预取它们，然后根据需要在网页上显示它们。

我尝试了几种预取方法，包括一个漂亮的插件，但这是一个非常简单的方法：

<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 毫秒的延迟。为什么会发生这种情况，我该怎么办？

4

3 回答 3

2

也许 CSS 精灵会帮助你。这些非常适合动画，如果您没有足够的图像编辑技能，可以使用大量免费的在线生成器。

于 2012-10-21T05:05:53.707 回答
1

您正在创建一个新的 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()但保留信息，如果你想将它保存在你的容器中，你可以省略它），并将prependTo()它的放到你的容器中：

$('.holding-container #img1').detach().prependTo('.animation-container');
于 2012-10-21T03:26:41.797 回答
0

您可以通过以下两种方式预加载图像：

支持事件的图像预加载器 javascript

有没有办法将图像异步加载到用户的缓存中？

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

于 2012-10-21T04:14:14.253 回答