JavaScript進(jìn)階教程(第四課第一部分)
2019-11-21 02:10:07
供稿：網(wǎng)友
在以前的課程中，我們學(xué)習(xí)了對(duì)文本和字符串的各種操作，今天我們專注于兩種不同的數(shù)據(jù)類型：圖象和對(duì)象。學(xué)完這一課，你將知道如何：
使用JavaScript來加速圖象交換。
創(chuàng)建你自己的對(duì)象來使腳本易于理解。
使用關(guān)聯(lián)數(shù)組來快速存取腳本中的每一個(gè)對(duì)象。
使用JavaScript做圖象變換的一個(gè)主要問題是，它直到需要換圖時(shí)才去告訴瀏覽器下載那張圖象。如果你有一張大的圖象，想在鼠標(biāo)滑過一副圖象時(shí)調(diào)出來，瀏覽器得臨時(shí)下載這張圖，這可能會(huì)花一定時(shí)間從而使滑動(dòng)效果大打折扣。
如果你的連接速度較慢，而你要調(diào)入的是一個(gè)相當(dāng)大的圖象的話，那你把鼠標(biāo)放到圖上后只好去等待。由于有的瀏覽器要求被調(diào)入的圖象必須保存在緩沖區(qū)里，所以有時(shí)你可能根本就看不到圖象變換的效果。為了避免這些煩心的問題，我們可以把要變換的圖象在頁面調(diào)入時(shí)就預(yù)先裝載。
在Web編程時(shí)，預(yù)裝載是在需要圖片之前就將圖片下載到緩存的技術(shù)。采用這樣的方式可以使當(dāng)確實(shí)需要顯示圖片時(shí)迅速將其從緩存中恢復(fù)回來并立即顯示。
預(yù)裝載圖象其實(shí)并不困難。你要做的就是創(chuàng)建一個(gè)新的image對(duì)象，然后把要預(yù)裝的圖象名設(shè)定成image的src屬性，如下所示：
var an_image = new Image();
an_image.src = "my_nice_image.gif";
通過設(shè)置image的src屬性就可以自動(dòng)地把圖象下載到你的硬盤里（當(dāng)然假設(shè)你的cache可以用），然后圖象變換時(shí)就從硬盤直接讀入圖象而不用再去下載了。
剩下要做的唯一一件事就是，怎樣在頁面被下載以后和圖象變換操作之前使預(yù)裝圖象發(fā)生。讓人愉快的是這很簡(jiǎn)單。HTML中的body標(biāo)記有一個(gè)事件處理器叫onLoad，當(dāng)頁面被調(diào)入后它將被調(diào)用。如果你的body標(biāo)記是這樣的：
<body onLoad="doPreload();">
那么doPreload()函數(shù)將在網(wǎng)頁下載后被調(diào)用。函數(shù)的代碼是這樣的：
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()函數(shù)創(chuàng)建了需要預(yù)裝的圖象名的數(shù)組，并把數(shù)組作為參數(shù)傳送到preloadImages()函數(shù), preloadImages()函數(shù)包含了一個(gè)循環(huán)，每次循環(huán)都創(chuàng)建一個(gè)新的圖象對(duì)象，并把圖象名設(shè)到它的src屬性中。
不很難吧？圖象對(duì)象相當(dāng)有用對(duì)吧？我很高興你這樣想，休息一會(huì)兒，馬上我們就要進(jìn)入一個(gè)更令人興奮，更讓人動(dòng)腦筋的話題：創(chuàng)建你自己的對(duì)象。
