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

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

תוכלו לחקור את הרעיון של טעינת תמונות בעצלתיים וללמוד כיצד ליישם זאת באמצעות HTML ו-JavaScript עם ה-API של Intersection Observer.

מהי טעינה עצלנית?

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

למה להשתמש בטעינה עצלה?

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

  • טעינת עמוד ראשונית מהירה יותר: טעינה עצלנית מונעת את טעינת התמונות בבת אחת, ומפחיתה את זמן טעינת העמוד הראשוני. משתמשים יכולים להתחיל ליצור אינטראקציה עם האתר שלך מוקדם יותר, מה שיוביל לחוויית משתמש טובה יותר.
    • instagram viewer
  • שיפור תגובתיות הדף: על ידי טעינת תמונות תוך כדי גלילה של המשתמשים, האתר נשאר רספונסיבי וזורם, ומבטיח גלילה וניווט חלקים ללא צורך להמתין עד שכל התוכן ייטען.
  • חיסכון ברוחב פס: טעינה עצלנית חוסכת ברוחב פס, מה שהופך אותו לאידיאלי עבור משתמשים ניידים ובעלי חיבורי אינטרנט איטיים. זה יכול להפחית את צריכת הנתונים של האתר שלך, לטובת המשתמשים.
  • יתרונות SEO: מנועי חיפוש כמו גוגל שקול את מהירות הדף כגורם דירוג. יכול טעינה עצלה להשפיע באופן חיובי על ביצועי ה-SEO של האתר שלך על ידי שיפור זמן הטעינה.

עכשיו כשאתה מבין מדוע טעינה עצלנית מועילה, בואו נבדוק כיצד ליישם אותה.

יישום טעינה עצלה: סימון HTML

כדי להתחיל, יהיה עליך לשנות את קוד ה-HTML שלך כך שיכלול את loading="עצלן" תכונה על שלך תגים.

<body>
<main>


<section>
<imgsrc="./image-one-high.jpg"alt=""loading="lazy" />
section>


<section>
<imgsrc="./image-two-high.jpg"alt=""loading="lazy" />
section>


<section>
<imgsrc="./image-three-high.jpg"alt=""loading="lazy" />
section>


main>


body>

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

כרגע העמוד נראה כך:

יישום טעינה עצלה: יישום JavaScript

כדי לקחת את הטעינה העצלנית שלך לשלב הבא, השתמש ב-Intersection Observer API. API זה מאפשר לך לצפות כאשר אלמנט נכנס או יוצא ממנו.

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

לאחר מכן, כשהתמונה הזו הופכת לגלויה בתוך נקודת התצוגה, JavaScript מחליף אותה בגרסה האיכותית יותר. כדי ליישם זאת, שנה את ה-HTML שלך.



 src="./image-one-low.webp"
 alt=""
 loading="lazy"

 data-src="./image-one-high.jpg"
 />
</section>


 src="./image-two-low.webp"
 alt=""
 loading="lazy"

 data-src="./image-two-high.jpg"
 />
</section>




 src="./image-three-low.webp"
 alt=""
 loading="lazy"

 data-src="./image-three-high.jpg"
 />
</section>

כאן, מקור התמונה העיקרי הוא הגרסה באיכות נמוכה והתמונה האיכותית היא המקור המשני. לאחר מכן העמוד נראה כך:

לאחר מכן, בחר את כל התמונות שברצונך לטעון בעצלתיים:

"use strict";
const lazyImages = document.querySelectorAll('img[loading="lazy"]');

לאחר מכן, צור IntersectionObserver לְהִתְנַגֵד.

const observer = new IntersectionObserver();

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

const observer = new IntersectionObserver((lazyImages, observer) => { });

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

const observer = new IntersectionObserver((lazyImages, observer) => {
 lazyImages.forEach((image) => {
if (image.isIntersecting) {
const lazyImage = image.target;
 lazyImage.src = lazyImage.dataset.src; // Swap the image source
 observer.unobserve(lazyImage); // Stop observing this image
 }
 });
});

לבסוף, אתחול התצפית עבור כל אלמנט.

// Start observing each lazy image
lazyImages.forEach((lazyImage) => { observer.observe(lazyImage); });

ועם זה, יישמת טעינה עצלנית עם JavaScript.

שיקולי טעינה עצלנית

בעת שילוב טעינה עצלנית, חשוב לקחת בחשבון את ההיבטים הבאים:

  • נְגִישׁוּת: כדי להבטיח נגישות, ספק טקסט חלופי לתמונות עם ה alt תְכוּנָה. מידע זה משמש כנקודת הסתמכות עבור קוראי מסך.
  • תאימות דפדפן: לפני היישום של טעינה עצלנית, אשר את התאימות שלה עם דפדפנים שונים. לא כל הדפדפנים מרחיבים את התמיכה בתכונה זו. במקרים מסוימים, הכללת polyfill עשויה להיות הכרחית, במיוחד עבור דפדפנים ישנים יותר. כלי כמו אני יכול להשתמש הוא משאב רב ערך להערכת תאימות הדפדפן.
  • בדיקה: הבדיקה המקיפה של יישום הטעינה העצלה על פני ספקטרום של מכשירים ומידות מסך מקבלת חשיבות עליונה.

שיפור מהירות האתר וחווית המשתמש

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

בנוסף, תיהנה מ-SEO טוב יותר ותחסוך בשימוש ברוחב הפס. אז למה לחכות? התחל לבצע אופטימיזציה של האתר שלך היום עם השיטה הפשוטה אך החזקה הזו.