图像在页面上加载多少次？答案

【问题标题】：How many times does an image load on a page?图像在页面上加载多少次？
【发布时间】：2011-09-02 13:49:55
【问题描述】：

我正在 JQuery 中创建一个图像浏览器插件。本质上，我的页面上会有一个全尺寸的图像，下面是一个图像滚动条，其中包含一堆可用图像的缩略图。当用户单击缩略图时，它将向上移动到全尺寸框。

我打算只通过 HTML/CSS 调整缩略图的大小，而不是存储单独的缩略图文件。我的问题是，如果浏览器将我所有的图像加载到缩略图滚动器中，当它被推入全尺寸查看器时是否必须再次重新加载每个图像？

我知道这个问题的答案通常是否定的——一旦浏览器下载了文件，它就可以使用了。但是，我不只是使用静态图像。对图像进行了一些预处理，所以我将通过 PHP 发送它们。

例如，我的其中一个缩略图的 src 可能是 www.mydomain.com/prepImage.php?id=1

PHP 然后会做一些处理并返回如下：

header("Content-Type: image/jpeg");
echo $StringifiedJPEGFile;

每次我将图像的来源设置为该链接时，是否会像这样从 PHP 返回文件会强制浏览器重新下载图像？

【问题讨论】：

【解决方案1】：

每次我将图像的来源设置为该链接时，是否会像这样从 PHP 返回文件会强制浏览器重新下载图像？

图像每页仅加载一次。即便如此，也将取决于您发送的标头。

您可以调整最后修改的标头、过期标头、设置 etag 标头等，以便仅在需要时重新加载。

【讨论】：

【解决方案2】：

图像是否可以缓存取决于浏览器设置和您的缓存控制标头。除此之外，任何图像无论是从 php 加载还是其他东西都被同等对待。 GET请求可以根据HTTP缓存。

【讨论】：

【解决方案3】：

您可以通过添加虚拟查询字符串使其加载新图像，例如

  <img src="my_image.php?a=432345" id="my_image" onclick="this.src='my_image.php?a=68945' " />

只是一个例子，为了每次都更新，数字应该唯一改变。

【讨论】：