preload

preload("https://example.com/font.woff2", {as: "font"});

• 参考
  • preload(href, options)
• 用法
  • 渲染时预加载
  • 在事件处理程序中预加载

参考

preload(href, options)

要预加载资源，请从react-dom调用preload函数。

import { preload } from 'react-dom';

function AppRoot() {
  preload("https://example.com/font.woff2", {as: "font"});
  // ...
}

请参见下面的更多示例。

preload函数向浏览器提供一个提示，指示它应该开始下载给定的资源，这可以节省时间。

参数

• href: 字符串。要下载的资源的URL。
• options: 对象。它包含以下属性
  • as: 必填字符串。资源类型。它的可能值是audio, document, embed, fetch, font, image, object, script, style, track, video, worker。
  • crossOrigin：字符串。要使用的CORS策略。其可能的值为anonymous和use-credentials。当as设置为"fetch"时，这是必需的。
  • referrerPolicy：字符串。获取资源时要发送的Referrer标头。其可能的值为no-referrer-when-downgrade（默认值）、no-referrer、origin、origin-when-cross-origin和unsafe-url。
  • integrity：字符串。资源的加密哈希值，用于验证其真实性。
  • type：字符串。资源的MIME类型。
  • nonce：字符串。使用严格的内容安全策略时，允许使用资源的加密nonce。
  • fetchPriority：字符串。建议获取资源的相对优先级。可能的值为auto（默认值）、high和low。
  • imageSrcSet：字符串。仅与as: "image"一起使用。指定图像的源集。
  • imageSizes：字符串。仅与as: "image"一起使用。指定图像的大小。

返回

preload 不返回任何内容。

注意事项

• 对preload的多次等效调用与单个调用具有相同的效果。根据以下规则，对preload的调用被认为是等效的。
  • 如果两个调用的href相同，则它们是等效的，除了
  • 如果as设置为image，则如果两个调用的href、imageSrcSet和imageSizes相同，则它们是等效的。
• 在浏览器中，您可以在任何情况下调用preload：在渲染组件时、在Effect中、在事件处理程序中等等。
• 在服务器端渲染或渲染服务器组件时，只有在渲染组件时或在源自渲染组件的异步上下文中调用preload时，它才有效。任何其他调用都将被忽略。

用法

渲染时的预加载

如果您知道它或其子组件将使用特定资源，则在渲染组件时调用preload。

在事件处理程序中预加载

在切换到需要外部资源的页面或状态之前，在事件处理程序中调用preload。这比在新页面或状态的渲染过程中调用它更早地启动了该过程。

import { preload } from 'react-dom';

function CallToAction() {
  const onClick = () => {
    preload("https://example.com/wizardStyles.css", {as: "style"});
    startWizard();
  }
  return (
    <button onClick={onClick}>Start Wizard</button>
  );
}