ממשקי IntersectionObservers מאפשרים לכם לקבל התראות כשרכיב שנמדד נכנס לאזור התצוגה של הדפדפן או יוצא ממנו.
נניח שאתם רוצים לעקוב אחרי מקרים שבהם רכיב ב-DOM נכנס לאזור התצוגה הגלוי. מומלץ לעשות זאת כדי לטעון תמונות באופן מדורג בדיוק בזמן, או כדי לדעת אם המשתמש מביט בבאנר מסוים של המודעה. כדי לעשות זאת, אפשר לחבר את אירוע הגלילה או להשתמש בטיימר תקופתי ולהפעיל את הטלפון getBoundingClientRect()
ברכיב הזה.
עם זאת, הגישה הזו איטית מאוד כי כל קריאה ל-getBoundingClientRect()
מאלצת את הדפדפן לפרוס מחדש את הדף כולו ועלולה לגרום לבעיות רבות באתר שלך. כאשר יודעים שהאתר נטען בתוך iframe ורוצים לדעת מתי המשתמש יכול לראות רכיב, כמעט בלתי אפשרי. המודל של מקור יחיד והדפדפן לא יאפשרו לך לגשת לנתונים מדף האינטרנט שמכיל את ה-iframe. זו בעיה נפוצה במודעות, לדוגמה, שנטענות לעיתים קרובות באמצעות מסגרות iframe.
בדיקת החשיפה הזו ליעילות יותר היא המטרה שתוכננו על ידי IntersectionObserver
, והיא זמינה בכל הדפדפנים המתקדמים. בעזרת IntersectionObserver
אפשר לדעת כשרכיב שנמדד נכנס לאזור התצוגה של הדפדפן או יוצא ממנו.
איך יוצרים IntersectionObserver
ממשק ה-API הוא די קטן, וניתן לתאר אותו בצורה הטובה ביותר בעזרת דוגמה:
const io = new IntersectionObserver(entries => {
console.log(entries);
}, {
/* Using default options. Details below */
});
// Start observing an element
io.observe(element);
// Stop observing an element
// io.unobserve(element);
// Disable entire IntersectionObserver
// io.disconnect();
כשמשתמשים באפשרויות ברירת המחדל של IntersectionObserver
, הקריאה החוזרת (callback) תיקרא גם כשהרכיב מופיע באופן חלקי בתצוגה וגם כשהוא עוזב את אזור התצוגה.
אם צריך לצפות במספר רכיבים, אפשר ומומלץ לצפות במספר רכיבים באמצעות אותה מופע IntersectionObserver
באמצעות קריאה ל-observe()
מספר פעמים.
הפרמטר entries
מועבר לקריאה החוזרת (callback), שהוא מערך של אובייקטים של IntersectionObserverEntry
. כל אובייקט כזה מכיל נתוני חיתוך מעודכנים של אחד מהאלמנטים המתועדים.
🔽[IntersectionObserverEntry]
time: 3893.92
🔽rootBounds: ClientRect
bottom: 920
height: 1024
left: 0
right: 1024
top: 0
width: 920
🔽boundingClientRect: ClientRect
// ...
🔽intersectionRect: ClientRect
// ...
intersectionRatio: 0.54
🔽target: div#observee
// ...
הערך rootBounds
הוא התוצאה של קריאה ל-getBoundingClientRect()
ברכיב הבסיסי (root), שהוא אזור התצוגה כברירת מחדל. הערך boundingClientRect
הוא התוצאה של הפקודה getBoundingClientRect()
ברכיב שנמדד. intersectionRect
הוא החיתוך של שני המלבנים האלה ומראה בפועל איזה חלק של הרכיב הגלוי הוא. המונח intersectionRatio
קשור באופן הדוק, והוא מציין כמה מהאלמנט גלוי. בעזרת המידע הזה, מעכשיו אפשר להטמיע תכונות כמו 'טעינה בזמן אמת' של נכסים לפני שהם מוצגים במסך. ביעילות.
IntersectionObserver
מעבירים את הנתונים שלהם באופן אסינכרוני, וקוד הקריאה החוזרת יפעל ב-thread הראשי. בנוסף, במפרט עצמו כתוב ש-IntersectionObserver
הטמעות צריכות להשתמש ב-requestIdleCallback()
. המשמעות היא שהקריאה להתקשרות חזרה שסיפקתם היא בעדיפות נמוכה ותבוצע על ידי הדפדפן במהלך זמן חוסר פעילות. זוהי החלטה מושכלת לגבי התכנון.
גלילה ב-div
אני לא מת על גלילה בתוך אלמנט, אבל אני לא כאן כדי לשפוט, וגם לא IntersectionObserver
. האובייקט options
משתמש באפשרות root
שמאפשרת להגדיר חלופה לאזור התצוגה בתור הרמה הבסיסית (root). חשוב לזכור שהפרמטר root
צריך להיות ישות האב של כל הרכיבים המתועדים.
שילוב של כל הפריטים!
לא. מפתח גרוע! זה לא שימוש מושכל במחזורי המעבד (CPU) של המשתמש. נחשוב על גלילה אינסופית כדוגמה: בתרחיש הזה, בהחלט מומלץ להוסיף סנטינלים ל-DOM ולצפות בהם (ולמחזר!) אותם. צריך להוסיף סנטינל קרוב לפריט האחרון בגלילה האינסופית. כשהסנטינל מוצג, אפשר להשתמש בקריאה חוזרת (callback) כדי לטעון נתונים, ליצור את הפריטים הבאים, לצרף אותם ל-DOM ולמקם אותם מחדש בהתאם. אם ממחזרים את הסנטינל בצורה תקינה, אין צורך בקריאה נוספת ל-observe()
. IntersectionObserver
ממשיך לעבוד.
עדכונים נוספים בבקשה
כפי שצוין קודם, הקריאה החוזרת (callback) תופעל פעם אחת כשהרכיב שנמדד יוצג באופן חלקי, ופעם נוספת אחרי שהוא יצא מאזור התצוגה. כך מקבלים תשובה מ-IntersectionObserver
לשאלה "האם רכיב X בתצוגה?". עם זאת, במקרים מסוימים ייתכן שזה לא יהיה מספיק.
כאן האפשרות threshold
נכנסת לתוקף. היא מאפשרת להגדיר מערך של ערכי סף של intersectionRatio
. תתבצע קריאה חוזרת לקריאה חוזרת (callback) בכל פעם ש-intersectionRatio
יחרוג מאחד מהערכים האלה. ערך ברירת המחדל של threshold
הוא [0]
, והוא מסביר את התנהגות ברירת המחדל. אם נעדכן את threshold
ל-[0, 0.25, 0.5, 0.75, 1]
, נקבל הודעה בכל פעם שרבעון נוסף של הרכיב יוצג:
יש אפשרויות נוספות?
נכון לעכשיו, יש רק אפשרות אחת נוספת לאלו שצוינו למעלה. rootMargin
מאפשר לציין את השוליים של הרמה הבסיסית (root) וכך להגדיל או לכווץ את האזור שמשמש לצמתים. השוליים האלה מצוינים באמצעות מחרוזת בסגנון CSS, á la "10px 20px 30px 40px"
, ומציינים את השוליים העליונים, הימניים, התחתון והשמאלי בהתאמה. לסיכום, מבנה האפשרויות של IntersectionObserver
כולל את האפשרויות הבאות:
new IntersectionObserver(entries => {/* … */}, {
// The root to use for intersection.
// If not provided, use the top-level document's viewport.
root: null,
// Same as margin, can be 1, 2, 3 or 4 components, possibly negative lengths.
// If an explicit root element is specified, components may be percentages of the
// root element size. If no explicit root element is specified, using a
// percentage is an error.
rootMargin: "0px",
// Threshold(s) at which to trigger callback, specified as a ratio, or list of
// ratios, of (visible area / total area) of the observed element (hence all
// entries must be in the range [0, 1]). Callback will be invoked when the
// visible ratio of the observed element crosses a threshold in the list.
threshold: [0],
});
<iframe>
קסם
הנכסים IntersectionObserver
תוכננו במיוחד עם התייחסות לווידג'טים של שירותי מודעות ושל רשתות חברתיות, שמשתמשים לעיתים קרובות ברכיבי <iframe>
וכדאי לדעת אם הם מוצגים. אם <iframe>
מזהה אחד מהרכיבים שלו, גם גלילה ב-<iframe>
וגם גלילה בחלון שמכיל את התג <iframe>
יפעילו את הקריאה החוזרת בזמנים המתאימים. לעומת זאת, במקרה השני, הערך rootBounds
יוגדר לערך null
כדי למנוע דליפת נתונים בין מקורות.
מה נושא IntersectionObserver
לא?
חשוב לזכור ש-IntersectionObserver
הוא לא פיקסל מושלם ולא זמן אחזור קצר. השימוש בהם להטמעת הפרעות כמו אנימציות התלויות בגלילה עלול להיכשל, מאחר שהנתונים יהיו כבר לא מעודכנים עד שתתחיל להשתמש בהם. ההסבר כולל פרטים נוספים על התרחישים המקוריים של השימוש ב-IntersectionObserver
.
כמה עבודה אפשר לבצע בקריאה החוזרת?
תשובה קצרה ומתוקה: אם משקיעים יותר מדי זמן בקריאה החוזרת (callback), הם גורמים לעיכוב בעדכון האפליקציה — כל השיטות הנפוצות רלוונטיות.
המשך והצליב את הרכיבים שלך
תמיכת הדפדפן ב-IntersectionObserver
טובה, כפי שהיא זמינה בכל הדפדפנים המתקדמים. אם יש צורך, אפשר להשתמש ב-polyfill בדפדפנים ישנים יותר, והוא זמין במאגר של WICG. כמובן שלא תיהנו מיתרונות הביצועים אם תשתמשו ב-polyfill שהטמעה מותאמת תעניק לכם.
אפשר להתחיל להשתמש ב-IntersectionObserver
כבר עכשיו. ספרו לנו מה חשבתם.