预加载的图像再次加载

2024-02-18

我正在预加载我的图像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(使用前将#替换为@)

预加载的图像再次加载 的相关文章

随机推荐

  • C# NUnit 参数化 TestCaseSource 值识别

    我在 NUnit 2 6 1 上使用 TestCaseSource 来测试具有不同对象类构造函数参数的相同断言 I mean Test TestCaseSource myConstructorsForMale public void Che
  • python 按时间顺序对 OrderedDict 键进行排序

    我有以下内容OrderedDict from collections import OrderedDict a OrderedDict a 2016 April 1 a 2016 January 2 a 2017 February 3 a
  • api 网关调用 lambda 时事件对象为空

    现在我的 lambda 只是回显事件对象 def lambda handler event context pprint event 我一直在代码中使用事件对象来获取这样的路径event path 当我像这样运行 sam local 在本地
  • 使用express/redis进行会话存储时,“会话”未定义

    我正在尝试在我的 Express 应用程序中使用 Redis 进行会话 我执行以下操作 var express require express var RedisStore require connect redis express app
  • 在 Python 字符串中的括号前转义(插入反斜杠)

    我需要格式化许多包含类似结构的字符串 u LastName FirstName Department Subdepartment 我的愿望是让字符串看起来像这样 u LastName FirstName Department Subdepa
  • 如何为graphicsmagick 配置 JPEG 委托?

    我想将图像裁剪到指定的像素区域 我想使用gm模块来自https github com aeckmann gm https github com aheckmann gm 我正在运行 Linux Mint 13 和 node js v0 9
  • 如何检测 Perl 正则表达式中有多少个捕获组?

    我有一堆perl questions tagged perl regexp questions tagged regexps 在脚本中 我想知道其中有多少个捕获组 更准确地说 我想知道在真正的匹配操作中实际使用它们之前 如果 和 数组匹配
  • 如何配置 Xcode 将“{”放在生成的文件中我想要的位置

    我知道这在程序员中是一个相当有争议的问题 但在开发时 我喜欢我的 IDE 将左大括号放置在方法 接口 控件声明下方 以用于说明目的 这就是 Xcode 自动生成带有 结尾的骨架方法的方式 void isTrue BOOL input if
  • 使用 Git,子树合并具有子模块的外部项目的最佳方法是什么?

    我正在使用 Git 存储库来存储与我正在开发的网站相关的所有内容 该存储库保存与该站点相关的所有文件 包括文档 模型 原始分层图像等 以及我放入的 Web 根目录内容www子目录 我现在想要开始将我选择使用的 CMS 与项目的其余部分集成
  • 如何开始编写合成 WM?

    我想编写一个基本的硬件加速窗口管理器 所以我一直在寻找一些有关如何开始的文档 但我只找到了本教程 http wingolog org archives 2008 07 26 so you want to build a compositor
  • 在 Maybe 类型上应用函数?

    Haskell 新手 我不知道如何将函数 a gt b 应用于列表 也许 a 并获取 也许 b maybeX a gt b gt Maybe a gt Maybe b 该函数应该做与 map 完全相同的事情 将函数 f 应用于 Maybe
  • 为什么我的生成器在迭代后变空了?

    我有一个生成器通过我正在使用的库的函数调用返回给我 然后 我将此生成器传递给一个函数 该函数迭代它并对每个项目执行一系列逻辑 然后我想在调用该函数后引用同一个生成器 然而 生成器似乎不再拥有 生成任何物品 代码是这样的 let myGene
  • Twitter API:如何获取用户 ID、谁喜欢特定推文?

    我正在尝试获取有关将特定推文添加到收藏夹的用户的信息 但我在文档中找不到它 Twitter 可以做到这一点 但没有将此方法作为 API 提供 这是不公平的 显然 做到这一点的唯一方法是scrape http web archive org
  • PySpark 在终端中执行时出现“非法反射访问操作”

    我已经在本地安装了 Spark 和组件 并且能够在 Jupyter iPython 中以及通过 Spark submit 执行 PySpark 代码 但是收到以下警告 WARNING An illegal reflective access
  • 我可以在 Eclipse 中运行 Spark 单元测试吗

    最近我们从使用烫洗改为使用火花 我使用eclipse和eclipse的scala IDE来编写代码和测试 测试在 twitter 的 JobTest 类上运行良好 任何使用 JobTest 的类都可以自动作为 Eclipse 中的 scal
  • 如何在R中根据样本id标记PCA点

    我有一个使用对象 选项卡 制作的 PCA 图 gt tab sample id EV1 EV2 1 G495 0 0074331465 3 837111e 02 2 G1 0 0141980856 6 964191e 02 3 G10 0
  • 如何从 gem 资产中覆盖单个文件来进行资产:预编译?

    情况 我使用带有自己的 JavaScript 和样式表资源的 gem 这个 gem 使用标准的 application js 和 application css 清单来要求其所有资产 gem app assets javascripts g
  • System.setErr() 干扰 Logger

    在较大的程序中 我使用静态java util logging Logger实例 但重定向System err连续到几个不同的文件 这Logger第二次尝试重定向时无法记录System err 这是一个显示问题的测试程序 import jav
  • 更改收件人短信的“发件人”字段

    我希望短信的收件人看到我的公司名称 而不是电话号码 这怎么可能 我目前正在使用 Twilio 但我愿意接受涉及其他服务的建议 对于那些看过 philnash 的答案但仍然遇到问题的人 请阅读本文 我正在使用 twilio ruby gem
  • 预加载的图像再次加载

    我正在预加载我的图像componentDidMount像这样 photos forEach picture gt const img new Image img src picture url 但是当我尝试像这样插入图像时 在另一个组件中