如何在单页面应用中重新获取图片？

Question

我做了很多研究并尝试了很多东西来解决我的问题，但要么我做错了，要么我不知道该怎么做。

我有这个JS单页面应用程序，显示图像缩略图。我将图像响应标头设置为使用etags，因为每个缩略图可能会随着时间而改变。

这是怎么回事： 1.我加载页面，看到有一个GET调用，用这些响应头检索缩略图（etag已设置，缓存控制没有缓存，过期日期设置为过去一天）：

date: Wed, 25 Mar 2015 13:24:56 GMT
cache-control: private, no-cache, max-age=0
expires: Tue Mar 24 2015 09:24:56 GMT-0400 (EDT)
etag: 1427215131000

1. 我转到页面的另一部分（缩略图未显示在页面上）。
2. 我回到缩略图视图，我看到了缩略图，但没有重新制作（没有GET调用来检索缩略图）。

我需要进行此GET调用以验证服务器上的映像是否已更改（基于etag）。顺便说一句，我也在浏览器中禁用了缓存，但我仍然没有看到任何GET调用。

任何人都知道如何解决这个问题？

非常感谢！

Answer 1

我使用了socket.io。每当在后端更改图像，并通过socket.io发送更新消息时，通知前端特定图像已更改并需要重新获取。

前端将确保对此映像的下一次调用将在调用结束时添加时间戳，以对服务器进行重新调用。

例：

1. 用户访问该页面，图片网址为http://www.example.com/images/logo.png。
2. 用户在网站上导航，图片网址仍为http://www.example.com/images/logo.png。
3. 后端的图像更改：事件发送到前端。
4. 用户浏览单个Web应用程序，并且必须再次显示徽标图像。图片网址已更改为http://www.example.com/images/logo.png?_=1427980814941。
5. 用户在网站上导航，图片网址现在仍然是http://www.example.com/images/logo.png?_=1427980814941。
6. 如果后端有其他更改，我们将回到第3步。