טעינה מראש

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, __TK_12, track, track.
  • crossOrigin: מחרוזת. מדיניות CORS שימוש. הערכים האפשריים: anonymous ו-use-credentials. חובה כשהערך של as הוא "fetch".
  • referrerPolicy: מחרוזת. כותרת מפנה שתישלח בזמן הטעינה. הערכים האפשריים: no-referrer-when-downgrade (ברירת מחדל), no-referrer, origin, origin-when-cross-origin, ו-unsafe-url.
  • integrity: מחרוזת. hash קריפטוגרפיה של המשאב לצורך [תאימות אותנטיות]https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_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 בכל מצב: בזמן רינדור קומפונטה, בתוך אפקט, בתוך מטפל באירועים, וכן הלאה.
• ברינדור צד שרת או ברינדור רכיבי שרת, ל-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>
  );
}