当点击返回按钮时，避免图像闪烁

Question

我正在开发一个类似Instagram的网页界面，其中包含一个图片网格。当我点击其中一张图片时，跳转到显示此图片详细信息的另一个页面。用户可以通过点击“返回”按钮或向右滑动（如果使用iPhone）返回上一页。

问题是，当用户返回到网格页面时，图片会重新加载，这会造成不好的影响。我分析了流量并发现，当请求图片时，我的Node.JS服务器会正确地回答304未被修改。如何强制浏览器（iPhone 6的safari）不重新加载图像？有没有一种方法可以缓存它们？

我想要实现的行为与从safari移动端访问Facebook类似。如果您打开一张图片，然后划到时间线上返回，时间线上的图片不会闪烁。

这是我的服务器发送图片的方式: 我的前端使用React.JS。

谢谢帮助。

- Alessandro

---

我对应用程序一窍不通，但对于网站，您需要使用正确的缓存标头发送图像，以便它们可以在用户设备上缓存。 - I haz kode

你好 @Ihazkode，我刚刚编辑了我的问题，并附上了服务器发送图像的网络分析。 - Alessandro

Answer 1

我这里说的可能有点高深，但是...

您的图片没有被缓存

您的问题在于发送到您的图片中的Cache-Control头中的max-age。您设置了Cache-Control= public, max-age=0。

您的头信息基本上告诉浏览器该图像项目只有0秒的新鲜度，这会强制在每次加载时重新验证。

换句话说，您的图片缓存总是在它们加载后立即“过期”。就好像您设置了Cache-Control: no-cache一样。

- I haz kode

Answer 2

浏览器正在缓存图片。 304 Not Modified 响应告诉浏览器使用它已经缓存的图片。简而言之，如果您的服务器发送了一个 304 并且您在设备上看到了图片，则这些图片已经成功缓存。但是，无论如何缓存，发送请求到服务器并等待 304 响应仍然需要不确定的时间。

缓存不是问题所在。问题在于页面正在重新加载。您不希望发送任何新请求，即使是您希望接收 304 响应的请求。如果您想要 Facebook 或其他高级应用程序的效果，您需要创建一个 单页应用程序。或者至少在网站的这个部分模仿 SPA。

由于您正在使用 React，您可能正在寻找 React Router 或类似的库来欺骗导航（因此后退按钮将用户带回图像列表，前进按钮将用户带回该特定图像等）。

然后有两种方法显示图像详细信息页面。

1. 当用户点击图像时，卸载ImageList组件（或您称之为的任何内容），并安装ImageDetails组件。当用户点击back时，卸载ImageDetails组件并重新安装ImageList组件。这种方法非常直接，特别是在使用React Router时。

以下是使用React Router的基本思路：

<Switch>
    <Route path="/images" component={ImageList} exact />
    <Route path="/images/:id" component={ImageDetails} />
</Switch>

2. 将图片详细信息页面变为弹出框。这样，ImageList组件就不会被卸载。当用户点击一张图片时，仅仅挂载ImageDetails组件。当用户点击“返回”时，卸载它。这种方式肯定更难，我并不是很推荐，但如果你的图片列表非常长，当React卸载/重新挂载ImageList组件时，你可能会开始看到延迟。

- bowheart