איך עובדת טעינה עצלנית?
תמונת HTML רגילה נראית כך:
<img src="sample.jpg" width="100%"/>תוספים בטעינה עצלנית כותבים מחדש את הקוד כך:
<img data-src="sample.jpg" width="100%"/>כפי ששמת לב,srcהתכונה שונתה לdata-src.
כי לאsrc, הדפדפן אינו טוען בתחילה תמונה זו. מאוחר יותר, קוד ג'אווה סקריפט קטן בודק אם התמונה נמצאת ב-viewport (התצוגה של המשתמש), ואם היא בפנים,data-srcחוזר לזהsrcאיזה דפדפן מפעיל את ההורדה והתצוגה של התמונה.
מהי טעינה עצלה מקורית?
Chrome מגיע עם "טעינה עצלה מקורית". אתה יכול לקרוא על זה כאן.
לטעינה עצלה מקורית יש את היתרון שאין צורך ב-JavaScript ובדרך כלל היא הרבה יותר מהירה מאחר והדפדפן עושה זאת "באופן טבעי".
הקוד נראה כך:
<img src="sample.jpg" loading="lazy" width="100%"/>מהן תמונות מעופפות?
Flying Images הוא תוסף טעינה עצלנית בביצועים גבוהים. הוא משתמש בטעינה העצלה "המקורית" של הדפדפן אם היא זמינה, אחרת השתמש ב-JavaScript רגיל לטעינה עצלה.
תמונות מעופפות יכולות גם לטעון תמונות עוד לפני שהתמונות מופיעות בשדה התצוגה.
האם אתה מפחד מטעינה עצלנית כי היא פוגעת בחוויית המשתמש?
במה שונות תמונות מעופפות מתוספי טעינה עצלתיים אחרים?
- משתמש בטעינה עצלה מובנית - השתמש בטעינה עצלה מובנית אם זמין (נכון לעכשיו נתמך רק ב-Chrome), אחרת השתמש ב-JavaScript כדי לטעון תמונות בעצלתיים.
- טען תמונות לפני הכניסה לנקודת מבט - בעוד תוספים אחרים טוענים תמונות כשהן "בתוך" נקודת התצוגה, תמונות מעופפות טוענות אותן כשהן עומדות להיכנס לנקודת התצוגה.
- JavaScript זעיר - רק 0.5 KB, דחוס, מופחת.
- אם תרצה, אתה יכול להשתמש רק native - רוצה לתמוך רק בכרום? אתה יכול לעבור ל"מקורי בלבד", שאינו מחדיר JavaScript.
- משכתב את כל קוד ה-HTML - לעולם אל תחמיצו תמונה עקב טעינה עצלנית (גם אם היא נוספה על ידי תוספי גלריה).
- חומר מילוי שקוף - בסיס שקוף זעיר64 מתווסף לכל התמונות. לא עוד הבהוב בעת טעינת תמונות.
- אל תכלול מילות מפתח - כמעט כל התוספים לטעינה עצלנית מספקים תכונת אי הכללה, אולם תמונות מעופפות יכולות גם לא לכלול תמונות מצומת האב של התמונה. שימושי אם לתמונה שלך אין שם מחלקה.
- תומך בדפדפנים עם IE ו-JavaScript מושבתים - כל התמונות נטענות באופן מיידי אם זה Internet Explorer או אפילו אם JavaScript מושבת לחלוטין (באמצעות
noscriptתָג).
