在弹出窗口中引导图像而不重新下载图像答案

【问题标题】：Bootstrap image in popover without re-downloading the image在弹出窗口中引导图像而不重新下载图像
【发布时间】：2014-04-25 12:03:34
【问题描述】：

我正在下载并调整图像大小以适合我的设计（减小宽度/高度）。如果我想在悬停完整图像时创建一个弹出框，是否必须再次重新下载图像？由于这个答案暗示了这种方式：Bootstrap popover, image as content。

我的jade 看起来像这样：

img#art.img-responsive(style='margin-bottom:10%')

我会在需要时使用以下代码更新图像的来源：

   if (questionMap[questionOrder[number - 1]].type === 'ART') {
        $('#art').attr('src', 'http://' + questions.host + '/image/' + questionMap[questionOrder[number - 1]].src)
    }

现在我需要在弹出框代码中添加相同的源属性并进行第二次下载还是有其他解决方法？从另一个角度来看：如果我在一个页面中包含两次相同的图像，它会被下载两次（假设启用了服务器端缓存）？

【问题讨论】：

标签： jquery css twitter-bootstrap

【解决方案1】：

浏览器在缓存方面非常聪明。它应该只请求一次。

此外，当它向服务器请求图像时，它通常会发送对图像的请求，以及一些告诉服务器的标头。嘿，我想要这个图像，但我已经有了一个具有这些属性的你上次发给我的时候告诉过我的。

然后服务器可以响应 200 表示它是不同的内容 304 表示你拥有的内容相同，所以我不会再次发送它，使用你得到的那个..

浏览器会缓存它。但是，根据用户的设置，浏览器可能会在下次请求页面时再次请求图像，例如，如果用户在页面访问之间清除缓存。

【讨论】：