javascript - 避免按下返回按钮时图像闪烁
<p><p>我正在开发一个带有类似 Instagram 导航的网络界面。这意味着我有一个图片网格，当我单击其中一个时，我会转到另一个页面，该页面显示我单击的图像的详细信息。然后用户可以通过点击后退按钮返回(或者如果使用 iPhone 则向右滑动)。</p>
<p>我遇到的问题是当用户返回网格页面时，图像被重新加载，这会导致不好的效果。
我分析了流量，发现我的 Node.JS 服务器在请求图像时正确回答 304 Not Modified。如何强制浏览器(iphone 6 的 safari)不重新加载图像？有没有办法缓存它们？</p>
<p>我想要实现的行为也类似于从 safari mobile 访问的 Facebook。如果您打开一张图片，然后滑动返回时间轴，则时间轴中的图像不会闪烁。</p>
<p>这是我的服务器发送图像的方式:
<a href="/image/YtEFA.png" rel="noreferrer noopener nofollow"><img src="/image/YtEFA.png" alt="This is how I send images"/></a> </p>
<p>我的前端在 React.JS 中</p>
<p>感谢您的帮助</p></p>
<br><hr><h1><strong>Best Answer-推荐答案</ strong></h1><br>
<p><p>我在这里说得太过头了……但是</p>
<p><strong>您的图片未缓存</strong> </p>
<p>您的问题是与图像一起发送的 <code>Cache-Control</code>header 中的 <code>max-age</code>。你有 <code>Cache-Control= public, max-age=0</code> </p>
<p>您的<a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control" rel="noreferrer noopener nofollow">headers</a>几乎告诉浏览器该元素的图像是新鲜的 0 秒，这会强制在每次加载时重新验证。</p>
<p>换句话说，图像的缓存总是在它们加载的第二个“过期”。好像你有 <code>Cache-Control: no-cache</code></p></p>
<p style="font-size: 20px;">关于javascript - 避免按下返回按钮时图像闪烁，我们在Stack Overflow上找到一个类似的问题：
<a href="https://stackoverflow.com/questions/45581347/" rel="noreferrer noopener nofollow" style="color: red;">
https://stackoverflow.com/questions/45581347/
</a>
</p>
页:
[1]