טעינה מדורגת של תמונות שלא מופיעות מיד במסך עם גדלים מדורגת

Katie Hempenius

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

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

הוספת הסקריפט העצליות לדף

• לוחצים על רמיקס לעריכה כדי לערוך את הפרויקט.

כבר בוצעה הורדה של lazysizes.min.js והוספה של האפליקציה לתקלה הזו. כדי לכלול אותו בדף:

• מוסיפים את תג <script> הבא ל-index.html:

  <script src="lazysizes.min.js" async></script>
  <!-- Images End -->
</body>

תוך כדי גלילה, התמונות ייטענו בצורה חכמה כשהמשתמש יגלול בדף, ונותנים עדיפות לתמונות שיוצגו למשתמש בקרוב.

ציון התמונות לטעינה מדורגת

• יש להוסיף את המחלקה lazyload לתמונות שאמורות להיטען באופן מדורג. בנוסף, משנים את המאפיין src ל-data-src.

לדוגמה, השינויים עבור flower3.png ייראה כך:

<img src="images/flower3.png" alt="">
<img data-src="images/flower3.png" class="lazyload" alt="">

בדוגמה הזו, כדאי לנסות טעינה מדורגת של flower3.png, flower4.jpg ו-flower5.jpg.

ראו הדגמה

זהו! כדי לראות את השינויים האלה בפעולה, פעלו לפי השלבים הבאים:

• כדי לראות תצוגה מקדימה של האתר, לוחצים על View App (הצגת האפליקציה) ואז על Fullscreen (מסך מלא).

• פותחים את המסוף ומוצאים את התמונות שנוספו עכשיו. הכיתות שלהם ישתנו מ-lazyload ל-lazyloaded כשגוללים למטה בדף.

• תוכלו לבדוק את חלונית הרשת כדי לראות את קובצי התמונה נטענים בנפרד כשגוללים למטה בדף.

אימות באמצעות Lighthouse

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

1. כדי לראות תצוגה מקדימה של האתר, לוחצים על View App (הצגת האפליקציה) ואז על Fullscreen (מסך מלא).
2. מקישים על 'Control+Shift+J' (או על 'Command+Option+J' ב-Mac) כדי לפתוח את כלי הפיתוח.
3. לוחצים על הכרטיסייה Lighthouse.
4. מוודאים שתיבת הסימון ביצועים מסומנת ברשימה קטגוריות.
5. לוחצים על הלחצן יצירת דוח.
6. מוודאים שהבדיקה בנושא דחיית ההצגה של תמונות שלא מופיעות במסך הסתיימה.

זהו! השתמשת בשכבת עיגון כדי לבצע טעינה מדורגת של התמונות בדף שלך.