时间戳

首页 > 解决方案 > 浏览器是否有可能缓存图像并且不发出请求？

javascript - 浏览器是否有可能缓存图像并且不发出请求？

问题描述

我正在使用 react 来呈现一个简单的<img>标签。当我卸载和挂载（图像实际上是从 dom 中删除并重新渲染）时，我通常可以看到图像，但是如果我看到 devtools 的“网络”选项卡，我看不到浏览器发出的任何类型的请求。（并且服务器没有收到任何内容，因此实际上没有发出请求）。

这怎么可能？通常，当浏览器使用缓存时，您会看到请求并从服务器获得“从磁盘”或 304，在这种情况下，不会发出请求。

我的服务器正在发送带有 etag 的 Cache-Control: 'no-cache' 因为我需要浏览器随时与服务器进行检查。

这可能吗？

这是一个示例，如果您打开标签网络并按“隐藏”，您可以看到没有发出请求。我怎样才能避免这种情况？

https://codesandbox.io/s/lj5mm7rjm

标签： javascriptreactjsimagecachingbrowser

解决方案

抑制这种行为的一种简单方法是添加一个时间参数，例如：

render() {
    const time = new Date().getTime();
    const url = `http://iserotope.com/wp-content/uploads/2014/10/hi.jpg?t=${time}`;
    
    return (
      <div className="App">
        {!this.state.hide && (
          <img
            width="100"
            src={url}
          />
        )}

        <h2 onClick={this.toggle}>hide</h2>
      </div>
    );
  }

推荐阅读