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>
  );
}