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

הוספת lazy loading בקלות לתמונות עם תכונה אחת בלבד.
לוגו של תקן HTML5

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

ביצועים הוא דבר חשוב, במיוחד בטלפון נייד ובמיוחד אם אנחנו רוצים 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. ואז ההתנהגות היא רגילה. לשימושכם.

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

פוסטים נוספים שכדאי לקרוא

יסודות בתכנות

מספרים בינאריים בקוד

איך, ויותר חשוב למה, משתמשים במספרים בינאריים בתכנות? גם בפייתון ובג׳אווהסקריפט?

תמונת תצוגה של מנעול על מחשב
פתרונות ומאמרים על פיתוח אינטרנט

הגנה מפני XSS עם Trusted Types

תכונה ב-CSP שמאפשרת מניעה כמעט הרמטית להתקפות XSS שכל מפתח ווב צריך להכיר וכדאי שיכיר.

גלילה לראש העמוד