避免按下返回按钮时图像闪烁

Posted

技术标签:

【中文标题】避免按下返回按钮时图像闪烁【英文标题】:Avoid image blinking when back button is hit 【发布时间】:2018-01-16 19:01:18 【问题描述】:

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

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

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

这是我的服务器发送图像的方式:

我的前端在 React.JS 中

感谢您的帮助

【问题讨论】:

我不知道 jack squat 关于应用程序,但对于网站,您需要发送带有正确缓存标头的图像,以便将它们缓存在用户的设备上。 你好@Ihazkode 我刚刚用我的服务器发送图像的网络分析编辑了我的问题。 【参考方案1】:

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

您的图片未缓存

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

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

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

【讨论】:

【参考方案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 时,卸载它。这种方式肯定更难,我不会真的推荐它,但如果你的图像列表很长,你可能会在 react unmounts/remounts ImageList 组件时开始看到延迟。

【讨论】:

以上是关于避免按下返回按钮时图像闪烁的主要内容,如果未能解决你的问题,请参考以下文章

UI在android studio中按下时闪烁

按下返回按钮时关闭 DatePickerDialog

按下按钮时从 STM32 ADC 获取读数

按下返回按钮时在 UITextField 之间切换

按下返回按钮时传递数据

在颤振中,按下后退按钮时如何返回上一个 URL?