JavaScript進階教程(第四課第一部分)_基礎知識

在以前的課程中，我們學習了對文本和字符串的各種操作，今天我們專注于兩種不同的數據類型：圖象和對象。學完這一課，你將知道如何：
使用JavaScript來加速圖象交換。
創建你自己的對象來使腳本易于理解。
使用關聯數組來快速存取腳本中的每一個對象。
使用JavaScript做圖象變換的一個主要問題是，它直到需要換圖時才去告訴瀏覽器下載那張圖象。如果你有一張大的圖象，想在鼠標滑過一副圖象時調出來，瀏覽器得臨時下載這張圖，這可能會花一定時間從而使滑動效果大打折扣。
如果你的連接速度較慢，而你要調入的是一個相當大的圖象的話，那你把鼠標放到圖上后只好去等待。由于有的瀏覽器要求被調入的圖象必須保存在緩沖區里，所以有時你可能根本就看不到圖象變換的效果。為了避免這些煩心的問題，我們可以把要變換的圖象在頁面調入時就預先裝載。
在Web編程時，預裝載是在需要圖片之前就將圖片下載到緩存的技術。采用這樣的方式可以使當確實需要顯示圖片時迅速將其從緩存中恢復回來并立即顯示。
預裝載圖象其實并不困難。你要做的就是創建一個新的image對象，然后把要預裝的圖象名設定成image的src屬性，如下所示：
var an_image = new Image();
an_image.src = "my_nice_image.gif";
通過設置image的src屬性就可以自動地把圖象下載到你的硬盤里（當然假設你的cache可以用），然后圖象變換時就從硬盤直接讀入圖象而不用再去下載了。
剩下要做的唯一一件事就是，怎樣在頁面被下載以后和圖象變換操作之前使預裝圖象發生。讓人愉快的是這很簡單。HTML中的body標記有一個事件處理器叫onLoad，當頁面被調入后它將被調用。如果你的body標記是這樣的：

那么doPreload()函數將在網頁下載后被調用。函數的代碼是這樣的：
function doPreload()
{
var the_images = new Array(’kwmatt.jpg’,’matbon.jpg’,’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];
}
}
doPreload()函數創建了需要預裝的圖象名的數組，并把數組作為參數傳送到preloadImages()函數, preloadImages()函數包含了一個循環，每次循環都創建一個新的圖象對象，并把圖象名設到它的src屬性中。
不很難吧？圖象對象相當有用對吧？我很高興你這樣想，休息一會兒，馬上我們就要進入一個更令人興奮，更讓人動腦筋的話題：創建你自己的對象。

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com