כיצד ליצור Preload Images בעזרת CSS בלבד

 קודם כל כדאי שאסביר למה אני מתכוון. ישנם מקרים בהם יש צורך לטעון תמונות מסויימות טעינה מוקדמת על מנת למנוע מצב שהמשתמש ממתין אפילו כמה שניות עד לפתיחת תמונה. מאוד מזכיר את ה – Preloader בפלאש שבו יש בר טעינה או כל דבר אחר ש"מעסיק" את המשתמש בינתיים עד שהתמונה או הסרטון ייטענו. מאחר ולא מדובר כאן בפלאש ניתן לכתוב סקריפט ב – Javascript כדי ליצור טעינת קבצים בזמן עליית האתר ובכך למנוע זמן המתנה. בפוסט הבא נסביר כיצד אפשר ליצור את זה ב – CSS בלבד ללא Javascript והרבה יותר פשוט.

  1. ניצור Animated Gif שנותן המחשה של טעינת קובץ כמו זה:
    ajax-loaderניתן ליצור ולהוריד גיפים כאלה בקלות מכאן
  2. כל Image כזה שנרצה לטעון אותו נעטוף אותו ב – DIV כמו בדוגמא הבאה:

    <div class=pic1>

    <img src="image-path/image1.jpg

    </div>
    </div
  3. בדף ה -CSS נבנה class שנקרא לו .pic1 וניתן לו את ההגדרות הבאות:
    .pic1{
    background: {#fff url(image-path/the_loader.gif) no-repeat center center;}</divגם בסעיף 2 וגם פה יש כמובן לשנות את image-path לנתיב לקובץ אצלכםת גם לתמונה וגם ב-CSS ל – Preloader.
    הסבר – באופן פשוט דאגנו לעטוף אץ התמונה ב – DIV שתפקידו להציג Loader באנימציה נחמדה כמה שניות עד שהתמונה מופיעה.
    זהו! פשוט וקל! ניתן כמובן להכיל את ה – class הזה על כל תמונה שנרצה לטעון