|
|
使用JavaScript來加速圖象交換。
創(chuàng)建你自己的對象來使腳本易于理解。
使用關(guān)聯(lián)數(shù)組來快速存取腳本中的每一個對象。
使用JavaScript做圖象變換的一個主要問題是，它直到需要換圖時才去告訴瀏覽器下載那張圖象。如果你有一張大的圖象，想在鼠標(biāo)滑過一副圖象時調(diào)出來，瀏覽器得臨時下載這張圖，這可能會花一定時間從而使滑動效果大打折扣。
如果你的連接速度較慢，而你要調(diào)入的是一個相當(dāng)大的圖象的話，那你把鼠標(biāo)放到圖上后只好去等待。由于有的瀏覽器要求被調(diào)入的圖象必須保存在緩沖區(qū)里，所以有時你可能根本就看不到圖象變換的效果。為了避免這些煩心的問題，我們可以把要變換的圖象在頁面調(diào)入時就預(yù)先裝載。
在Web編程時，預(yù)裝載是在需要圖片之前就將圖片下載到緩存的技術(shù)。采用這樣的方式可以使當(dāng)確實需要顯示圖片時迅速將其從緩存中恢復(fù)回來并立即顯示。
預(yù)裝載圖象其實并不困難。你要做的就是創(chuàng)建一個新的image對象，然后把要預(yù)裝的圖象名設(shè)定成image的src屬性，如下所示：
var an_image = new Image();
an_image.src = "my_nice_image.gif";
通過設(shè)置image的src屬性就可以自動地把圖象下載到你的硬盤里（當(dāng)然假設(shè)你的cache可以用），然后圖象變換時就從硬盤直接讀入圖象而不用再去下載了。
剩下要做的唯一一件事就是，怎樣在頁面被下載以后和圖象變換操作之前使預(yù)裝圖象發(fā)生。讓人愉快的是這很簡單。HTML中的body標(biāo)記有一個事件處理器叫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ù)包含了一個循環(huán)，每次循環(huán)都創(chuàng)建一個新的圖象對象，并把圖象名設(shè)到它的src屬性中。
不很難吧？圖象對象相當(dāng)有用對吧？我很高興你這樣想，休息一會兒，馬上我們就要進入一個更令人興奮，更讓人動腦筋的話題：創(chuàng)建你自己的對象。
JavaScript技術(shù)：JavaScript進階教程(第四課第一部分)，轉(zhuǎn)載需保留來源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。
