Question

我正在开发一个类似Instagram的导航网页界面。这意味着我有一个图片网格，当我点击其中一个时，我会转到另一个页面，向我显示我点击的图像的详细信息。然后用户可以通过单击后退按钮返回（或者如果使用iphone则向右滑动）。

我遇到的问题是，当用户返回网格页面时，图像会重新加载，从而导致效果不佳。我分析了流量，我看到我的Node.JS服务器在请求图像时正确回答了304 Not Modified。如何强制浏览器（iphone 6的safari）不重新加载图像？有没有办法缓存它们？

我想要实现的行为也类似于从safari mobile访问的Facebook。如果您打开图片然后滑动以返回时间线，则时间线中的图像不会闪烁。

这是我的服务器发送图片的方式：

我的前端在React.JS

感谢您的帮助

Answer 1

我在这里说话的方式......但是

您的图片未缓存

您的问题是与您的图片一起发送的max-age标题中的Cache-Control。你有Cache-Control= public, max-age=0

你的headers几乎告诉浏览器项目图像是新鲜的0秒，这会强制每次加载时重新验证。

换句话说，图像的缓存始终是＆＃34;已过期＆＃34;第二个他们加载。好像你有Cache-Control: no-cache

Answer 2

浏览器正在缓存图像。 304 Not Modified响应告诉浏览器使用它已缓存的图像。简而言之，如果您的服务器正在发送304并且您在设备上看到了图像，那么这些图片就会被成功缓存。但无论缓存如何，仍然需要无限期的时间将请求发送到服务器并等待304响应。

缓存不是问题所在。问题是页面正在重新加载。您不希望发送任何新请求，即使是您希望收到304响应的新请求。如果您想要Facebook或其他花哨的应用程序的效果，您将需要创建Single-Page Application。或至少模仿您网站的这一部分的SPA。

由于您正在使用React，因此您可能正在寻找React Router或类似的库以欺骗可导航性（因此后退按钮会将用户带回图像列表，转发需要用户回到那个特定的图像，等等。）

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

当用户单击图像时，卸载ImageList组件（或您调用的任何组件）并装入ImageDetails组件。当用户点击back时，请卸载ImageDetails组件并重新安装ImageList组件。这种方法非常简单，尤其是在使用React Router时。

以下是使用React Router的基本想法：

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

将图像详细信息页面设为弹出窗口。这样，ImageList组件永远不会卸载。当用户单击图像时，只需安装ImageDetails组件。当用户点击back时，请将其卸载。这种方式肯定比较难，我也不会真的推荐它，但是如果你的图像列表很长，你可能会在看到卸载/重新安装ImageList组件时看到延迟。