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

【问题标题】：How can I call images into the DOM without querying the server?如何在不查询服务器的情况下将图像调用到 DOM 中？
【发布时间】：2012-10-21 13:05:53
【问题描述】：

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

我尝试了几种预取方式，包括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 毫秒的延迟。为什么会发生这种情况，我该怎么办？

【问题讨论】：

您正在创建一个新的 Image 元素。请尝试从.holding-container 转移它。如果您在附加它时保留参考，那将是最快的：var img1 = $('<img src="Image1.png" />').appendTo(".holding-container"); 然后像这样做前置：img1.prependTo('.animation-container')

标签： javascript jquery dom

【解决方案1】：

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

【讨论】：

【解决方案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() 但保留信息，如果你想将它保存在你的容器中，你可以省略它），然后 prependTo() 它到你的容器：

$('.holding-container #img1').detach().prependTo('.animation-container');

【讨论】：

【解决方案3】：

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

Image preloader javascript that supports events

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

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

【讨论】：

我敢肯定，这两个都是优秀的预取器，但是它们遗漏了一些关键信息——一旦图像被提取，你如何实际使用它们？可以从对象中调用它们还是将它们放入 DOM 会导致服务器查询（根据我上面的问题返回 304 Not Modified）？
@MartinBurch - 预加载图像后，我试图解释您只是创建一个图像对象，将图像 URL 分配为图像src，图像将立即从浏览器缓存中加载（不调用服务器）。这就是“预加载到缓存中”的含义和作用，这就是您使用此代码的方式。