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

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

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

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

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

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

אהבתם? לא אהבתם? דרגו!


תגיות: פורסם בקטגוריה: HTML 5, רשת האינטרנט

אל תשארו מאחור! יש עוד מה ללמוד!

5 comments on “טעינת תמונה רק בגלילה למטה
  1. Ballon Ura הגיב:

    Great stuff! keep koing

  2. Royi Namir הגיב:

    This is an experimental API that should not be used in production code.

  3. יאיר הגיב:

    התמונה לא נטענת בכלל.. גם בכרום

  4. מעולה לא הכרתי את זה לפני כן , מעניין איך GOOGLE PAGESPEED יתייחס לזה.. שווה בדיקה.

  5. דוד הגיב:

    מגניב. מעניין כמה ספריות אופן סורס נעלם הצורך בהם.

כתיבת תגובה

האימייל לא יוצג באתר.

רישום