OGeek|极客世界-中国程序员成长平台

标题: javascript - 避免按下返回按钮时图像闪烁 [打印本页]

作者: 菜鸟教程小白    时间: 2022-12-12 13:37
标题: javascript - 避免按下返回按钮时图像闪烁

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

我遇到的问题是当用户返回网格页面时,图像被重新加载,这会导致不好的效果。 我分析了流量,发现我的 Node.JS 服务器在请求图像时正确回答 304 Not Modified。如何强制浏览器(iphone 6 的 safari)不重新加载图像?有没有办法缓存它们?

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

这是我的服务器发送图像的方式: This is how I send images

我的前端在 React.JS 中

感谢您的帮助



Best Answer-推荐答案


我在这里说得太过头了……但是

您的图片未缓存

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

您的headers几乎告诉浏览器该元素的图像是新鲜的 0 秒,这会强制在每次加载时重新验证。

换句话说,图像的缓存总是在它们加载的第二个“过期”。好像你有 Cache-Control: no-cache

关于javascript - 避免按下返回按钮时图像闪烁,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45581347/






欢迎光临 OGeek|极客世界-中国程序员成长平台 (http://ogeek.cn/) Powered by Discuz! X3.4