Angular：在 Firefox 中使用 img ng-src 时的图像缓存似乎已损坏答案

【问题标题】：Angular: caching of images when using img ng-src in firefox seems brokenAngular：在 Firefox 中使用 img ng-src 时的图像缓存似乎已损坏
【发布时间】：2013-10-23 14:43:57
【问题描述】：

我正在开发一个实时照片共享网站。它允许世界各地的用户一起看照片并在照片上发布 cmets，实时查看谁在看什么。

我曾经使用 jQuery DOM 操作（插入<img> 标签）来根据用户点击的内容显示不同的图像，最近我用带有 ng-src 指令的 Angular 控制器替换了这个表示逻辑。

整体逻辑有效，但我注意到在 Firefox 上，每当我更改 ng-src 值时，Angular 都会发出一个 GET 请求，而我希望该图像会缓存在浏览器上。

如果你去这里：http://dev14-www.photozzap.com/conference/j4bxpt3n，然后打开 Firebug / Net 视图，并在两张照片之间来回切换，你会看到它对图像发出 GET 请求，即使这些图像应该在缓存中。

影响是用户会看到他们点击照片的时间和它实际显示的时间之间存在一些滞后。

在 Chrome 上，Developer / Net 视图清楚地显示图像在图像之间来回切换时是从缓存中拉取的。

是否可以修复我的代码以允许在 Firefox 上缓存图像，或者那里存在 Angular 问题？ Chrome 似乎在做正确的事情。

【问题讨论】：

标签： javascript angularjs browser-cache http-caching

【解决方案1】：

我在 Firefox 24 上，我可以确认，每次我在照片之间切换时实际上都会发出请求，但是...正如您通过调查此类请求的详细信息所看到的，服务器以 304 Not Modified 响应，所以图像数据本身不会反复传输，因此性能不会受到太大影响。

即使 firefox 已将图像存储在缓存中，它也会发出请求以检查图像是否已更改，在看到 304 响应时它只会显示文件的本地版本。

【讨论】：

我又看了一遍。似乎新推出的 Firefox 24 确实正确使用了缓存中的图像。如果我的 Firefox 已经启动了几个小时，那么每次我在照片之间切换时，它都会突然开始发出 GET 请求。
我对此进行了更多试验，发现如果我使用 Firebug，Firefox 的缓存有时会以意想不到的方式运行（对我希望缓存的对象执行 GET 请求）。我意识到 Firebug 中的 Net 面板有一个“禁用浏览器缓存”选项，但有时甚至没有启用此选项也会出现意外行为。如果我使用从未激活过 Firebug 的新启动的 Firefox 会话，我会看到正确的缓存行为。
我也注意到了这种行为，但是如果初始请求返回 304，我只会得到 304，并且它没有考虑任何 max-age 或 Expires 标头。如果初始请求是 200，它将继续获得 200 响应，因为它不会在后续请求中发送和 If-Modified-Since。这似乎是一个错误，Chrome 的行为并非如此。如果这与 firebug 有关，则可能不是真正的问题，需要检查代理日志以确定。
确实好像和Firebug有关。如果 firebug 被禁用，我将看不到这些请求的任何痕迹。
为了确保只是禁用了 firebug 或其他此类扩展，只需检查您的 Web 服务器上的访问日志。您是否看到来自您的 IP 的对这些图像的请求？如果没有，你很好。

【解决方案2】：

这是一个萤火虫问题。如果您使用代理检查您的流量，您会看到在没有激活 firebug 的情况下，它不会再次从服务器请求图像，因此任何普通用户都可以。

【讨论】：