שיעור 4
דף 4: טעינה מוקדמת של תמונות – כיצד עושים זאת?
זה לא קשה מאוד להטעין מוקדם יותר את התמונות שלך. כל מה שאתה צריך לעשות הוא ליצור אובייקט תמונה, ואז להקצות את התמונה להטענה מוקדמת ל-src של אובייקט התמונה כמו בדוגמא:
var an_image = new Image();
an_image.src = "my_nice_image.gif";
קביעת ערך ה- ".src" של התמונה החדשה מוריד באופן אוטומטי את התמונה לכונן הקשיח של הגולש, בהנחה, כמובן, שה-cache דלוק. התמונה נקראת מתוך הכונן הקשיח במקום שתיקרא On-line.
כעט, נסה לעבור עם העכבר מעל הקישורים למטה. חילופי התמונה צריכים להתבצע די מהר.
אחת
שתיים
שלוש
הדבר יחיד שנשאר ללמוד הוא איך לגרום להטענה המוקדמת להתבצע בזמן שהעמוד נטען לראשונה על ידי הדפדפן, לפני כל פעולה אחרת של המשתמש. לשמחתנו, זה די ברור. לגוף התווית יש תכנית לטיפול באירועים הנקרא onLoad, אשר נקרא ברגע שעמוד מסיים להיטען. אם יש לך גוף תווית אשר נראה כך:
<body onLoad="doPreload();">
פונקצית ה- ()doPreload תקרא כאשר העמוד יסיים להיטען. הקוד עבור הפונקציות אשר אחראיות להטענה נראה כך:
function doPreload()
{
var the_images = new Array('stuff3a/kwmatt.jpg','stuff3a/matbon.jpg','stuff3a/lunchMat.jpg');
preloadImages(the_images);
}
function preloadImages(the_images_array)
{
for(loop = 0; loop < the_images_array.length; loop++)
{
var an_image = new Image();
an_image.src = the_images_array[loop];
}
}
בגלל ששמתי את onLoad – תכנית לטיפול באירועים - בגוף התווית, הפונקציה ()doPreload נקראת כאשר העמוד מסיים להיטען. ()doPreload יוצר מערך נתונים של שמות תמונות להטענה מוקדמת ומעביר את מערך הנתונים ל - ()preloadImages, אשר מסתובב בלולאה דרך מערך הנתונים. עם כל מעבר דרך הלולאה , הוא יוצר אובייקט תמונה חדש ומציב תמונה ל-src של אותו אובייקט התמונה.
לא קשה מידי,הא? אותו אובייקט תמונה הוא די שימושי, נכון? אני שמח שאתה חושב כך, משום שעכשיו זה הזמן להמשיך לדברים מנפחי ראש וערמומיים. קח הפסקה עכשיו, משום שבעמוד הבא אנו נכנס לעולם הרחב של יצירת אובייקטים.
חזור לתחילת הדף
לדף הבא «--
|
