弹出窗口中的Bootstrap图像，无需重新下载图像

Question

我正在下载并重新调整图像大小以适应我的设计（减小宽度/高度）。如果我想在悬停整个图像时创建一个弹出框，我是否必须重新下载图像？由于这个答案表明了这种方式：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)
    }

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

Answer 1

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

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

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

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