预加载的图像再次加载

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(使用前将#替换为@)

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

  • 从未用 @flow 标记的导入文件中获取类型定义

    TL DR我怎么告诉flow从未声明的导入模块导入类型定义 flow 加长版 流接缝能够从不使用流语法的文件中派生类型 请参阅示例 示例文件 flow js if Math random lt 0 5 var y hello else va
  • 为什么是 javascript:history.go(-1);无法在移动设备上工作?

    首先 一些背景 我有一个向用户呈现搜索页面 html 表单 的应用程序 填写标准并单击 搜索 按钮后 结果将显示在标准部分下方 在结果列表中 您可以通过单击将您带到新页面的链接来查看单个结果的详细信息 在详细信息页面中 我添加了一个 返回结
  • JavaScript 重定向到新窗口

    我有以下代码 它根据下拉列表的值重定向到页面 我如何使其在新窗口中打开 function goto form var index form select selectedIndex if form select options index
  • 使用 KnockoutJs 映射插件进行递归模板化

    我正在尝试使用以下方法在树上进行递归模板化ko映射 插入 http knockoutjs com documentation plugins mapping html 但我无法渲染它 除非我定义separate每个级别的模板 在以下情况下
  • React - 无法读取未定义的属性[重复]

    这个问题在这里已经有答案了 通常 当我单击子组件中的菜单项时 它会调用 this handlesort 这是一个本地函数 处理排序从我的父组件中获取 onReorder 属性 onReorder 调用名为 reOrder 的本地函数 它设置
  • jquery从变量中删除html元素

    我将 html 保存在变量中 var itinerary events today html 我有很多 html 和一个按钮我想删除 它的 ID 为 myButton 如何从变量中保存的 html 中删除它 我建议这种方法 var itin
  • 在javascript中解析json - 长数字被四舍五入

    我需要解析一个包含长数字的 json 在 java servlet 中生成 问题是长数字被四舍五入 当执行这段代码时 var s x 6855337641038665531 var obj JSON parse s alert obj x
  • 将div设置为隐藏,延时后可见

    我试图在 X 时间后 也许甚至在随机时间之后 但现在我们只做固定时间 在黑色背景上出现一个黄色方块 function initialSetup if document getElementById yellow null document
  • 表单计算器脚本基本价格未加载 OnLoad

    我的表单中有一个计算器来计算我的下拉选项选择 function select calculate on change calc input type checkbox calculate on click calc function cal
  • 通过 CDN 使用 Dojo 时如何加载自定义 AMD 模块?

    我正在使用 google 的 CDN 并尝试使用他们的加载程序加载我自己的 AMD 模块 我知道我做错了什么 但我被困住了 有任何想法吗
  • 如何使输入字段和提交按钮变灰

    我想变灰这两件事 http doorsplit heroku com 歌曲输入字段和提交按钮 直到用户输入艺术家 有没有一种简单的方法可以通过 JQuery 来做到这一点 艺术家输入字段的id是 request artist 你可以这样做
  • 动态img(或视频)标签根本不加载资源,HTTP请求处于“待处理”状态

    我尝试使用以下方法在 Web 应用程序上加载资源时遇到一些问题img or videoHTML 标签 我在我的应用程序中使用 Angular 并动态设置src的参数img标签 使用ng src src 指示 没有那么多图像和资源需要加载 在
  • firebase :: 无法读取 null 的属性“props”

    你好 我正在尝试将react router与firebase一起使用 但它给了我这个错误 无法读取 null 的属性 props 这正是代码 我正在其中使用我的反应路由器 向下代码位于作为登录面板组件的组件上 else if this em
  • 为什么在 Internet Explorer 中访问 localStorage 对象会引发错误?

    我正在解决一个客户端问题 Modernizr 意外地没有检测到对localStorageInternet Explorer 9 中的对象 我的页面正确使用 HTML 5 文档类型 并且开发人员工具报告该页面具有 IE9 的浏览器模式和 IE
  • FireFox 中的自动滚动

    我的应用程序是实时聊天 我有一个 Div 来包装消息 每条消息都是一个 div 所以 在几条消息之后 我的 DOM 看起来像这样 div div Message number two div div div div
  • 摆脱node-jsx

    在我的 NodeJS 应用程序的路由器中 我想渲染一个 React 应用程序 由于它没有被浏览器化 并且已反应 因此它返回unexpected token lt 构建时出错 我发现如果我require node jsx install 它不
  • Safari 支持 JavaScript window.onerror 吗?

    我有一个附加到 window onerror 的函数 window onerror function errorMsg url line window alert asdf 这在 firefox chrome 和 IE 中工作正常 但在 s
  • 如何仅在最后一个
  • 处给出透明六边形角度?
  • 我必须制作这样的菜单 替代文本 http shup com Shup 330421 1104422739 My Desktop png http shup com Shup 330421 1104422739 My Desktop png
  • 为什么元素上的负底部边距会降低该元素父元素的高度?

    这可能是由于边距折叠造成的 我知道边距折叠 至少知道它如何影响相邻元素 但我不明白当涉及负边距时它如何在嵌套元素上工作 例如 在此标记和随附的 CSS 中 Markup div class parent div class child Ch
  • 如何获取浏览器视口中当前显示的内容

    如何获取当前正在显示长文档的哪一部分的指示 例如 如果我的 html 包含 1 000 行 1 2 3 9991000 并且用户位于显示第 500 行的中间附近 那么我想得到 500 n501 n502 或类似的内容 显然 大多数场景都会比

随机推荐

  • 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 但是当我尝试像这样插入图像时 在另一个组件中