Javascript 强制浏览器缓存某些文件

我在数据库里有很多图像。图像数据存储在一个具有id的二进制列中。我编写了一个PHP脚本，读取该数据并输出正确的内容类型和数据

每当我想在页面上显示图像时，我都会将/image.php？id=1，其中1是数据库中图像的id，位于图像标记的src字段中。这一切都很好

现在，每当我再次访问页面或使用javascript修改某些图像的src时，它似乎会再次从服务器加载该图像。例如，我有一个图像：

。当我将鼠标移到这个图像上时，我使用javascript将src动态更改为/image.php？id=5。这会导致从服务器再次加载映像，这需要1到3秒的时间。在文档开头使用像素大小的图像预加载此图像不起作用。我猜这是因为我实际上在查询一个动态PHP脚本

如果图像具有相同的ID，是否有任何方法使浏览器缓存图像？我的数据库中的图像ID几乎不会改变（如果有的话）

---

任何帮助都将不胜感激。

文件名仅因查询参数不同而不同的缓存内容不可靠。例如，一些代理服务器将“style.css？v1”和“style.css？v2”视为同一个文件。这将导致依赖查询参数作为修订号的资产出现意外问题

在文件名中包含修订 您知道的每个资产（主要是css和js）将在将来更改，其名称或路径中将包含修订版：

• css/style\u v1.css

  而不是

  css/style.css？v1

  （或）

• css/v1/style.css

  而不是

  css/style.css？v1

基于文件名的缓存破坏 如果您没有适当的构建过程，这种方法将对您有所帮助。您将保留名称不变的文件名（即：style.css），并在mod_rewrite的帮助下，将请求从

/css/style..css

重写为

style.css

在HTML中：

<link rel="stylesheet" href="css/style.432.css">

下次在

style.css

中更改某些内容时，请从HTML文件更改css文件的修订号：

<link rel="stylesheet" href="css/style.433.css">

如果您使用的是VCS，您甚至可以使用当前提交作为资产的修订号，这将有助于识别测试阶段的问题，因为您经常在分支之间切换以测试应用程序的不同方面

阅读更多：

• -良好且评论良好的.htaccess示例文件

---

预加载方法必须有效。我不相信您可以在iTunes中使用“查询参数”缓存任何内容使用路径而不是查询参数（提示：mod_rewrite）并将其用作图像源。您可能需要发送适当的HTTP缓存头，以告知浏览器缓存图像的时间。但是，为什么要将图像存储在数据库中？根据我的经验，这是一种糟糕的代码味道。@AlexandruG。你应该写下这个作为答案，它是有效的。我从来没想过…好答案。请注意：您的答案似乎集中在如何不让浏览器基于提供的查询参数使用文件的缓存版本，而我希望浏览器使用缓存版本。我使用这个答案中介绍的原理，通过将图像重写为路径而不是查询字符串，使浏览器缓存图像。尽管我会提到这一点，以防未来的用户认为这个答案不能回答这个问题。

<link rel="stylesheet" href="css/style.433.css">