טעינה מאוחרת של תמונות רקע עם WP-Rocket

wp-rocket יודע להתמודד יפה מאוד עם lazy load של תמונות אבל הוא לא תומך ב lazy-load של תמונות רקע.

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

כדי כן לאפשר lazy load לתמונות רקע עם wp-rocket תצטרכו קצת לשנות את ההגדרה הרגילה של התמונה. המטרה היא שאלמנט ה html יהיה מוגדר עם inline style.

נניח באלמנטור אנחנו רוצים להגדיר תמונת רקע ל section, במקום ההגדרה הרגילה, נזרוק לתוך ה section ווידג'ט html ונכתוב בו את הקוד הבא:

<div style="background-image: url('path to image');
            background-repeat: no-repeat;
            background-position: center center;
            background-size: cover;
            height: 400px;">
</div>

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

כרגיל כל הפרמטרים צריכים להיות תואמים לצרכים שלכם וזו רק דוגמה. ניתן גם להוסיף מאפיינים נוספים ל style.

כעת wp-rocket כן יזהה את התמונה ויוסיף לאלמנט את הדבר הבא:

<div class="rocket-lazyload lazyloaded"
     style="background-image: url('path to image');
            background-repeat: no-repeat;
            background-position: center center;
            background-size: cover;
            height: 400px;">
</div>
0 0 דרג
דרג את הפוסט
הרשמה
Notify of
0 תגובות
Inline Feedbacks
הצג את כל התגובות

גם הסניפטים הבאים יעניינו אותך

0
אשמח לשמוע את דעתכם, מוזמנים להשאיר תגובהx