Images

בלי כתוביותעם כתוביות

מילון מושגים:

תמונה - קובץ גרפי המוצג על המסך. בהקשר של וירטואליזציה או Docker, תבנית מוכנה שממנה יוצרים מכונה או קונטיינר.

אירוע - התרחשות שהמערכת מזהה ויכולה להגיב לה, כמו לחיצת עכבר, הקשה או סיום פעולה.

תגית - סימון בקוד, למשל ב-HTML, שתוחם רכיב ומגדיר את תפקידו או תכונותיו. גם תווית לסימון וקיטלוג פריטים.

HTML - שפת הסימון שבה בונים את מבנה ותוכן דפי האינטרנט, באמצעות תגיות שמגדירות כותרות, פסקאות, קישורים ועוד.

מאפיין - תכונה שמצמידים לרכיב ומתארת אותו או את התנהגותו, למשל מאפיין של תגית HTML או שדה באובייקט.

כפתור - רכיב בממשק המשתמש שהמשתמש לוחץ עליו כדי להפעיל פעולה, כמו שליחת טופס או מעבר לדף אחר.

נתיב - מחרוזת שמתארת את מיקומו של קובץ או תיקייה במערכת הקבצים, או כתובת של משאב בתוך אתר.

זיכרון - רכיב מהיר ונדיף שבו המחשב שומר נתונים ותוכניות בזמן ריצתם. תוכנו נמחק עם כיבוי המחשב.

Images

בשיעור זה אנו לומדים על טעינה מוקדמת של תמונות בג'אווה סקריפט. אנו רואים מדוע תמונה גדולה או תמונה הנמצאת באתר אחר עלולה להיטען לאט ולפגוע בחוויית הגלישה, מציגים את הבעיה גם בטעינה רגילה וגם בטעינה דרך אירוע לחצן, ופותרים אותה בעזרת אובייקט Image ופעולת preload שמנצלת את הזמן שבו המשתמש גולש בדף.

נושאי הסיכום המוצגים בשיעור:

1. מתי טעינת תמונות איטית: כאשר עובדים עם תמונות, תמונה שאנו רוצים להציג יכולה להיות גדולה מאוד או להיות מוצגת כלינק מאתר אחר, ואז כשהמשתמש גולש לדף שלנו התמונה עלולה לקחת הרבה זמן להיטען. זה רלוונטי במיוחד גם כשרוצים לבצע אנימציה שמחליפה תמונות ברצף.

2. תגית img ב-html: הצגת תמונה נעשית בתגית img, כאשר המאפיין src קובע מאיפה להביא את התמונה, והמאפיין alt קובע מה יוצג במקום התמונה כאשר היא אינה קיימת או עד שהיא נטענת. מציגים תמונה גדולה שנמצאת באתר אחר, ונותנים לה רוחב של 100 אחוז.

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

4. טעינה מדורגת של התמונה: כאשר גולשים לדף בלי שהתמונה נטענה מראש, רואים שהתמונה נטענת בשלבים, שלב אחרי שלב, במהלך טעינת הדף עד שהיא מגיעה למצב שהיא נטענה לגמרי, וזו חוויית גלישה פחות נעימה למשתמש.

5. הצגת התמונה באירוע לחצן: כאשר התמונה אמורה להופיע רק באירוע מסוים, כמו לחיצה על לחצן, הבעיה נהיית חמורה יותר. מורידים את ה-src מהתגית, נותנים לתמונה id בשם myImage, ובונים פונקציה בשם showImage שניגשת בעזרת document.getElementById לתגית ומכניסה למאפיין src שלה את המחרוזת של ה-source של התמונה.

6. חוויית המתנה ללא preload: מגדירים לחצן input מטיפוס button עם הערך show image שקורא באירוע onclick לפונקציה. רק בלחיצה על הלחצן ג'אווה סקריפט מבינה שצריך להביא את התמונה, ואז היא נטענת שוב בשלבים והמשתמש ממתין זמן רב, וגם זו אינה התנהגות רצויה.

7. טעינה מוקדמת preload: הפתרון הוא לטעון את התמונה לפני הזמן. בונים פונקציה בשם preloadImage שבה מגדירים משתנה מטיפוס האובייקט הג'אווה סקריפטי Image, נותנים לו מאפיין src ומכניסים לתוכו את המחרוזת שמתארת את הנתיב של התמונה.

8. קריאה לפונקציה באירוע onload: קוראים לפונקציית ה-preload בטעינת הדף באירוע onload של ה-body. כאשר ג'אווה סקריפט מריצה את הפונקציה ורואה שהיא צריכה להוריד את התמונה, הדפדפן הולך ומוריד אותה מיד ברקע, בזמן שהמשתמש קורא טקסטים ומשתמש בדף.

9. מנגנון ה-cash של הדפדפן: הדפדפן הוא חכם ומביא כל לינק פעם אחת בלבד. כאשר הוא מוריד את התמונה הוא שומר אותה באזור הזיכרון הפנימי שנקרא cash, שמיועד לכל המידע הנפוץ שהדפדפן מוריד. כאשר ג'אווה סקריפט צריכה שוב את הלינק, שנייה לפני שהיא פונה לאתר האמיתי היא בודקת אם הוא כבר קיים ב-cash, ואם כן לוקחת אותו משם בלי להוריד אותו שוב, וכך כשהמשתמש לוחץ על הלחצן התמונה מופיעה בבת אחת ולא בזבזנו זמן על טעינתה.

בסיום השיעור ראינו את בעיית הטעינה האיטית של תמונות, גם בטעינת דף רגילה וגם דרך אירוע לחצן, ופתרנו אותה בטעינה מוקדמת עם אובייקט Image ואירוע onload, תוך הסתמכות על מנגנון ה-cash של הדפדפן שחוסך את ההורדה השנייה של התמונה. תודה רבה, ולהתראות בשיעור הבא.

בשיעור הבא נעסוק בנושא Threads.

מילון מושגים:

קוד מקור - הקוד שמפתחים כותבים בשפת תכנות, לפני הידור, המגדיר את פעולת התוכנה.

Java - שפת תכנות עילית ומונחית עצמים, הרצה על מכונה וירטואלית (JVM) ומשמשת לפיתוח מגוון יישומים.

להורדת קוד מקור של כל הדוגמאות בקורס JAVA SCRIPT למתחילים -לחץ כאן לתלמידי המכללה בלבד

להורדת קוד מקור של כל הדוגמאות בקורס JAVA SCRIPT למתקדמים- לחץ כאן לתלמידי המכללה בלבד

פרקי ההרצאה: Images

תמלול ההרצאה: Images

הטקסט המלא של הדקות הראשונות בהרצאה «Images» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.

00:01
הדבר הבא שאנחנו הולכים לראות בג'אווה סקריפט זה טעינה מוקדמת של תמונות. כשאנחנו עובדים עם תמונות יכול להיות שתמונה שאנחנו רוצים להציג היא בעצם יכולה להיות מאוד מאוד גדולה או שאנחנו יכולים להציג אותה כלינק מאתר אחר.
00:19
כאשר זה קורה והמשתמש גולש לדף שלנו אז יכול להיות שהתמונה היא פשוט ייקח לה המון זמן להיטען בגלל שהיא פשוט גדולה או בגלל שהיא נמצאת באיזשהו אתר אחר שלוקח זמן להוריד אותה ממנו.
00:31
בנוסף יכול להיות שאנחנו רוצים לבצע איזושהי פעולת אנימציה ולהחליף תמונות ברצף במידה ויש לנו דבר כזה עדיף שאנחנו נטען לפני זה את התמונות על ידי java script בכדי שהדפדפן ישמור אותם בזיכרון ואז כשהוא יצטרך להציג אותם הוא לא יבזבז זמן בללכת ולטעון אותם כי הם כבר יהיו לו בזיכרון אז אם אנחנו רק רוצים להציג תמונה אז יש לנו את התגית IMG של html src זה מאפיין יותר נכון אטריביוט
01:02
שקובע מאיפה להפיג את התמונה ואלט ומאפיין שקובע מה יוצג בתמונה במידה והיא לא קיימת או עד שהיא נטענת. אז בואו נציג תמונה שהיא יחסית גדולה והיא נמצאת באיזשהו אתר אחר.
01:20
לצורך כך יצרתי בטולבוקס את התמונה עצמה כקישור, בואו נמחק את הגרשיים האלה ונגרור את מה שיש בטולבוקס לכאן. אגב, איך ניתן להגדיר את הדבר הזה בתוך הטולבוקס?
01:40
אז למעשה זה מאוד פשוט, מה שאפשר לעשות זה פשוט לכתוב כל קוד שאנחנו רוצים לדוגמה אם היינו רוצים לכתוב איזושהי לולאה היינו יכולים לכתוב איזשהו קטע קוד לסמן אותו ופשוט לגרור אותו לתוך הטולבוקס ברגע שאני מסמן וגורר אותו לתוך הטולבוקס אז פשוט מאוד הוויז'ל סטודיו שומרת לי אותו בתוך הטולבוקס ואם בעתיד אני רוצה אותו אז אני פשוט יכול לתפוס אותו ולגרור אותו לאן שאני רוצה ויש לי את קטע הקוד הזה.
02:13
אז לפני זה שמרתי את הלינק הזה לתמונה. בואו נמחק את הלולה שרשמנו כאן מהטולבוקס ונסגור כרגע את הטולבוקס. שמרתי תמונה בתגית IMG רגילה לחלוטין.
02:30
בואו ניתן לה רק רוחב של 100%. אם כעת אנחנו נגלוש לדף, אז בגלל שלא טענו את התמונה הזאת לפני זה, אז אנחנו הולכים לראות שלוקח טיפה זמן לתמונה להיטען. היא הולכת להיטען בשלבים ואז זה בעצם חוויית גלישה פחות נעימה למשתמש שהוא מתחיל לראות את התמונה שלב אחרי שלב.
02:57
בואו נגלוש לדף ואנחנו מתחילים לראות את הדף נטען שלב אחרי שלב והתמונה מתחילה להיטען תוך כדי הטעינה של הדף עד שבעצם היא מגיעה למצב שהיא נטענה לגמרי.
03:12
אוקיי אז איך אנחנו יכולים טיפה לייעל את התהליך הזה אז למעשה אם אנחנו רוצים שהתמונה תיטען ממש בהתחלה של הדף כלומר המשתמש איכשהו גולש הוא רואה איזושהי תמונת רקע די אין לנו כל כך ברירה מפני שממש בהתחלה אנחנו רוצים לטעון את התמונה.
03:32
אבל אם אנחנו רוצים להציג את התמונה באירוע מסוים, זאת אומרת שרק כשהמשתמש לוחץ על לחצן או מזיז את העכבר מאיפשהו, רק אז אנחנו רוצים לטעון את התמונה, כאן משהו אחר יכול לעזור לנו.
03:47
בואו קודם כל ננקה את הזיכרון של הדפדפן בכדי שהדפדפן ימחק כל פעם מחדש את התמונה הזאת וזה ידמה מצב שבו הלקוח פעם ראשונה גולש לאתר שלנו.
04:00
בואו נסגור את הדפדפן, וכעת בואו נציג את התמונה רק בלחיצה על איזשהו לחצן. אז נבנה פונקציה, נקרא לה showImage ופשוט נגיע לתגית של התמונה, ניתן לה ID, myImage, נלך על ידי document.getElementByID שיקבל
04:31
את myImage ואז נגיע למאפיין src שלה ונכניס לתוכו את המחרוזת הזאת של ה source של התמונה. אז בעצם מה שעשינו כאן, ורק כאשר הפונקציה תופעל ואנחנו הולכים להפעיל אותה באירוע, רק אז אני רוצה לטעון את התמונה.
04:57
אז כעת בואו נוריד את ה source הזה,