我正在预加载我的图像componentDidMount
像这样:
photos.forEach(picture => {
const img = new Image();
img.src = picture.url;
});
但是当我尝试像这样插入图像时(在另一个组件中)
<img src={photos[0].url} ... />
它必须再次加载图像。在我的网络选项卡中,我从同一 URL 对同一图像有 2 个相同的请求
具有相同的标头(除了 ofc 时间)
您可以通过浏览器为图像/CSS/JS 等静态资源以及 jQuery 等不经常更改的其他库启用缓存。尝试为静态资源添加缓存控制响应标头。这些是可用的值缓存控制标头。
Cache-Control: public
Cache-Control: must-revalidate
Cache-Control: no-cache
Cache-Control: no-store
Cache-Control: no-transform
Cache-Control: private
Cache-Control: proxy-revalidate
Cache-Control: max-age=<seconds>
Cache-Control: s-maxage=<seconds>
您还可以添加expires提供这些静态资源时的响应标头。将值设置为之前的日期将使浏览器不缓存响应。
Expires: <http-date>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)