לאט לאט מתגבשות מסקנות מהמשוב שלכם: יש שאלות שכמעט כולם ענו עליהם בצורה חד-משמעית, אז אני מתחילה מאלה :). אני לא אספר כרגע מה השאלות הללו, מפני שידוע לי כי יש קוראים שטרם ענו על הסקר, ואני לא רוצה להטות את דעתם בנידון… אבל בע”ה, כאשר השינויים יבשילו, אשתף אתכם.
ועכשיו, לענייננו. כשנתקלתי במאמר Loading Images on Demand with Pure CSS, הסתקרנתי: איך אפשר בעזרת CSS להעלים תמונות, ואז להעלות אותן רק כשהן נכנסות ל-view port של הצופה? האמת היא, שסקרנות אקדמית גרידא בד”כ לא מהווה בשבילי סיבה לקרוא מאמר. אני זקוקה לתועלת פרקטית מהענין כדי שיתחשק לי להקדיש זמן למשהו. אבל במקרה הזה יש לי כבר פלגאין של lazy load שאני מאד מרוצה ממנו, וממש אין לי עניין ליישם משהו כזה בעצמי, אפילו אם זה יחסוך לי את ה-JS, כך שאפשר להבין עד כמה הנושא סיקרן אותי למרות חוסר הפרקטיות שלו. למען הסר ספק: גם מחבר המאמר מודע לחוסר הפרקטיות, ובסוף המאמר הוא כותב שהוא ממש לא ממליץ להשתמש בקוד הזה בפרודקשן, א) כי הפתרון לא שלם, ב) גם לו הפתרון היה מושלם, זו לא הדרך האופטימלית לפתור את הבעיה הזו.
אז למה בכל זאת לקרוא את המאמר? כי זה ניסוי מגניב ביותר. מי בכלל חשב שאפשר להסתיר תמונות בעזרת CSS (אגלה כאן את הסוד: המחבר פשוט משתמש בתמונות רקע במקום בתמונות בתגית Img. סוג של התחכמות…), וגם הטכניקה שבעזרתה ה-CSS מגלה מתי התמונות נכנסות ל-view port של הצופה היא הברקה יפה (המחבר עושה זאת בעזרת יצירת div-ים נסתרים לרוחב כל המסך, ושימוש בארוע ה-hover שקורה להן כשהמשתמש גולל), והדובדבן על הקצפת הוא הפתרון לבעיה שאם משתמשים בארוע hover, אז איך גורמים לתמונות להשאר גם כשהעכבר עוזב את ה-div שעליו היה הארוע (הוא עושה זאת בעזרת טריק מגניב של המאפיין transition שלא ידעתי עליו ).
בקיצור, המאמר לא ארוך (יחסית לכל הדברים שמתוארים בו) והוא כולל גם תיאור של הנסינות הכושלים של המחבר לפני שהוא הגיע לפתרון של כל בעיה. כאמור, אל תנסו את זה בבית בפרודקשן, אבל יש שם זוית הסתכלות מעניינת על מה ש-CSS יכול לעשות. סוג של חשיבה מחוץ לקופסה. שווה.
תודה על הקישור לתוסף Lazy Load. הוא עזר לי מאוד באתר שעמוס בתמונות ועד היום היה נטען לאטו.
בכיף 🙂