טעינת תמונה רק בגלילה למטה

אם יש משהו שממש מגניב אותי זה פיצ'רים שפעם היה צריך המון קוד ג'אווהסקריפט כדי לייצר אבל היום אפשר לממש אותם בממש מעט מאוד שורות קוד, שלא לדבר על שורה, שלא לדבר על משפט אחד.

ביצועים הוא דבר חשוב, במיוחד בטלפון נייד ובמיוחד אם אנחנו רוצים SEO איכותי. דרך קלה להשיג ביצועים זה באמצעות פעולה שנקראת lazy load. טעינת משאבים אך ורק כשהלקוח צריך. אם מדובר בתמונה, אז לטעון אותה רק כשהלקוח גולל ומגיע לחלק שמשתמש בה. כשאנו משתמשים בתגית תמונה באופן רגיל, התמונות נטענות מייד בהתחלה, גם אם התמונה נמצאת בתחתית העמוד והלקוח לא גולל ולא ירצה לגלול. הרבה יותר אלגנטי לטעון את התמונה רק כאשר הלקוח מגיע אליה.

בעבר היינו צריכים לממש לוגיקה כזו באמצעות ג'אווהסקריפט. זה לא היה נורא נורא מסובך אבל גם לא נורא פשוט ובהחלט היה יכול להסתבך. תאמינו או לא, מסתבר שהיום אפשר לממש את זה בקלות רבה ואפילו רבה מאוד עם תגית שנקראת loading. התגית נתמכת כרגע בכרום אבל מן הסתם זה יהיה בדפדפנים האחרים מתישהו. אבל מה שטוב – זה לא יפריע לדפדפנים אחרים והמשתמשים בכרום ירוויחו.

בואו ונדגים? ברור שנדגים. איך משתמשים בתמונה? הכי פשוט שיש: להוסיף תגית loading שהערך שלה הוא lazy. ברגע שאתם משתמשים בזה, אז התמונה תטען רק כשהמשתמש יגיע אליה, לא לפני:

<img src="https://i.picsum.photos/id/238/300/300.jpg" loading="lazy" />

ברגע שהוספנו את זה, זה. מעכשיו יש לנו lazyload באופן אוטומנטי. מה עם דפדפנים שלא תומכים? לא מושפעים.

הנה דמו חי. יש פה מסמך עם שתי תמונות. ראשונה רגילה והשניה עם loading=lazing. הוספתי לה onload שמדפיס לקונסולה ברגע שהיא נטענת. תשימו לב שהיא נטענת רק שמגיעים קרוב אליה, לא לפני.

אפשר לשים בתכונה loading את הערך eager. ואז ההתנהגות היא רגילה. לשימושכם.

בחסות: הפורטל המלא לאזור היער השחור