HTML - איך לטעון סטריפ תמונות במהירות

שלבים

1. 1

   שלב 1

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

   שלב 2

   כעת בקוד הHTML שאנחנו רוצים לטעון תמונה עבורו. אנחנו נטען לכולם את אותה התמונה. הטריק הוא להגיד איזה חלק בתמונה יראה המשתמש . כאשר הקוד הרגיל יראה משהו בסגנון :
4. 3

   שלב 3

5. 4

   שלב 4

   נוסיף לו לפני הסגירה.
6. 5

   שלב 5

   background-position:-150px 0;" >
7. 6

   שלב 6

   כאשר המספרים מציינים איזה חלק אנחנו רוצים שיראו מהתמונה עד איזה חלק. שימו לב שלרוב תמיד נתחיל מאפס בהנחה שיש תמונות שכבר הופיעו הן יסתירו כבר את החלק שאיננו רוצים שיראו.
8. 7

   שלב 7

   עבור רצף של תמונות נקבל משהו בסגנון הזה:
9. 8

   שלב 8

   background-position:-0px 0;" background-position:-75px 0;" background-position:-150px 0;"
10. 9

    שלב 9

    כלומר למעשה בקוד התמונה הראשונה נראה כאילו תוצג כל התמונה, אך בפועל מהפיקסל ה75 היא תוסתר ע"י התמונה השניה וכך הלאה.
11. 10

    שלב 10

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