preload

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

• Справочник
  • preload(href, options)
• Использование
  • Предварительная загрузка при отрисовке
  • Предварительная загрузка в обработчике событий

Справочник

preload(href, options)

Для предварительной загрузки ресурса вызовите функцию preload из react-dom.

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 для разрешения ресурса при использовании строгой политики Content Security Policy.
  • fetchPriority: строка. Предлагает относительный приоритет загрузки ресурса. Возможные значения — auto (по умолчанию), high, и low.
  • imageSrcSet: строка. Используется только с as: "image". Указывает набор источников изображения.
  • imageSizes: строка. Используется только с as: "image". Указывает размеры изображения.

Возвращаемое значение

preload ничего не возвращает.

Примечания

• Несколько идентичных вызовов preload имеют тот же эффект, что и один вызов. Вызовы preload считаются эквивалентными по следующим правилам:
  • Два вызова эквивалентны, если у них одинаковый href, за исключением:
  • Если as установлено в image, два вызова эквивалентны, если у них одинаковый href, imageSrcSet, и imageSizes.
• В браузере вы можете вызвать preload в любой ситуации: во время отрисовки компонента, в эффекте, в обработчике событий и так далее.
• При рендеринге на стороне сервера или при рендеринге Server Components, preload имеет эффект только если вы вызываете его при отрисовке компонента или в асинхронном контексте, происходящем от отрисовки компонента. Любые другие вызовы будут проигнорированы.

Использование

Предварительная загрузка при отрисовке

Вызовите preload при отрисовке компонента, если вам известно, что он или его дочерние компоненты будут использовать определённый ресурс.

import { preload } from 'react-dom';

function AppRoot() {
  preload("https://example.com/script.js", {as: "script"});
  return ...;
}

Предварительная загрузка в обработчике событий

Вызовите 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>
  );
}