preload

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

• Reference
  • preload(href, options)
• שימוש
  • Preloading בזמן רינדור
  • Preloading בתוך event handler

Reference

preload(href, options)

כדי לבצע preload למשאב, קראו לפונקציה preload מתוך react-dom.

import { preload } from 'react-dom';

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

ראו דוגמאות נוספות בהמשך.

הפונקציה preload מספקת לדפדפן רמז שכדאי להתחיל להוריד את המשאב הנתון, מה שיכול לחסוך זמן.

Parameters

• 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: מחרוזת. hash קריפטוגרפי של המשאב לצורך אימות אותנטיות.
  • type: מחרוזת. סוג ה-MIME של המשאב.
  • nonce: מחרוזת. nonce קריפטוגרפי שמאפשר את המשאב כשמשתמשים ב-Content Security Policy קשוחה.
  • fetchPriority: מחרוזת. מציעה עדיפות יחסית לטעינת המשאב. הערכים האפשריים: auto (ברירת מחדל), high, ו-low.
  • imageSrcSet: מחרוזת. לשימוש רק עם as: "image". מציינת את source set של התמונה.
  • imageSizes: מחרוזת. לשימוש רק עם as: "image". מציינת את הגדלים של התמונה.

Returns

preload לא מחזירה דבר.

Caveats

• כמה קריאות שקולות ל-preload משפיעות כמו קריאה אחת. קריאות ל-preload נחשבות שקולות לפי הכללים האלה:
  • שתי קריאות שקולות אם יש להן אותו href, חוץ מהמקרה הבא:
  • אם as מוגדר כ-image, שתי קריאות שקולות אם יש להן אותו href, imageSrcSet, ו-imageSizes.
• בדפדפן אפשר לקרוא ל-preload בכל מצב: בזמן רינדור קומפוננטה, בתוך effect, בתוך event handler, וכן הלאה.
• ברינדור צד שרת או ברינדור Server Components, ל-preload יש השפעה רק אם קוראים לה בזמן רינדור קומפוננטה או בהקשר async שמקורו ברינדור קומפוננטה. קריאות אחרות ייחסמו.

שימוש

Preloading בזמן רינדור

קראו ל-preload בזמן רינדור קומפוננטה אם אתם יודעים שהיא או הילדים שלה ישתמשו במשאב ספציפי.

Preloading בתוך event handler

קראו ל-preload בתוך event handler לפני מעבר לעמוד או מצב שבהם יידרשו משאבים חיצוניים. כך התהליך מתחיל מוקדם יותר לעומת קריאה בזמן רינדור העמוד או המצב החדש.

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