首頁 > 開發者 > JavaScript
大量採用高解析度的映像的確可以讓一個Web網站容光煥發。但同樣也會造成網站訪問速度下降——圖片是檔案，檔案就要佔用頻寬，而頻寬直接同訪問等待時間相關。現在，讓我們來學習一種名為映像預裝載（image preloading）的小技巧來提高映像訪問速度。
一些瀏覽器試圖通過在本機快取中儲存這些圖片來解決此問題。這樣一來可以順序調用這些圖片——但對於首次使用這些圖片的時候仍然會存在延時。預裝載就是一種在需要圖片之前就將圖片下載到緩衝的技術。採用這樣的方式可以使當確實需要顯示圖片時迅速將其從緩衝中恢複回來並立即顯示。
Image()對象
最簡單的映像預裝載辦法是使用javascript建立一個新的Image()對象，然後將希望預裝載的圖片URL傳遞給此對象。假設我們擁有一個名為/UploadPic/2007-4/200741191620770.jpg的圖片檔案，我們希望當使用者滑鼠指標移動到一張已有的圖片上時顯示此檔案。為了能更快的對此檔案進行預裝載，我們簡單的建立了一個名為heavyImage的新Image() 對象，然後將其通過onLoad()事件控制代碼同步裝載到頁面上。
<html>
<head>
<script language = "JavaScript">
function preloader()
{
heavyImage = new Image();
heavyImage.src = "/UploadPic/2007-4/200741191620770.jpg";
}
</script>
</head>
<body >
<a href="#" >
<img name="img01" src="/UploadPic/2007-4/200741191620244.jpg"></a>
</body>
</html>
注意，圖片的標籤（tag）本身並不處理onMouseOver()以及onMouseOut()事件，這也正是上面樣本中的<img>標籤被包括在<a>標籤中的原因。標籤<a>則包括了對這些事件類型的支援。
通過數組（arrays）裝載多個圖片
在實際情況中，你很有可能需要預裝載不止一張的圖片；比如，對於包括多個圖片的菜單條，或者希望實現平滑的動畫效果。要實現這些並不困難，只需要利用JavaScript的數組，如下例所示：
<script language="JavaScript">
function preloader()
{
// counter
var i = 0;
// create object
imageObj = new Image();
// set image list
images = new Array();
images[0]="image1.jpg"
images[1]="image2.jpg"
images[2]="image3.jpg"
images[3]="image4.jpg"
// start preloading
for(i=0; i<=3; i++)
{
imageObj.src=images[i];
}
}
</script>
在上面的例子中，定義了變數i以及名為imageObj的Image()對象。然後定義了新數組images[]，每一個數組元素將儲存需要預裝載圖片的地址來源。最後，使用一個for()迴圈來遍曆整個數組，並對每個元素指定Image()對象，以此將圖片都預裝載到緩衝中。
Next page
Preloading and the JavaScript Image() object
onLoad()事件控制代碼（event handler）
同JavaScript中的許多其他對象一樣，Image()對象同樣有許多事件控制代碼。毫無疑問，其中最有用的是onLoad()控制代碼，它在圖片完全裝載時被調用。在圖片完全裝載之後，可以通過自訂函數來調用此控制代碼完成特定的功能。下例就給出了採用這樣的方法實現如下動作的代碼：當裝載圖片時顯示“please wait”螢幕，然後一旦完成裝載，就把瀏覽器引導到一個新的URL。
<html>
<head>
<script language="JavaScript">
// create an image object
objImage = new Image();
// set what happens once the image has loaded
objImage.onLoad=imagesLoaded();
// preload the image file
objImage.src='/UploadPic/2007-4/200741191621559.gif';
// function invoked on image load
function imagesLoaded()
{
document.location.href='index2.html';
}
</script>
</head>
<body>
Please wait, loading images...
</body>
</html>
當然，你也可以建立一個圖片數組，然後迴圈，對每個元素進行預裝載，然後跟蹤每個階段所裝載的圖片數量。一旦所有的圖片都被裝載，可以對事件控制代碼編程，以將瀏覽器帶入下一個階段（或完成其他的任務）。
預裝載和多狀態（Multi-State）菜單
現在，如何將剛剛學習到的所有理論知識應用到實際的應用程式中？下面是一段我最近編寫的代碼——一個包括按鈕（圖片連結）的菜單條，每一個按鈕都可能處於三種狀態中的一種：正常、滑鼠懸浮和單擊。由於按鈕具有多種狀態，所以必須使用圖片預裝載來確保菜單能足夠快的對狀態改變進行響應。列表A中的代碼顯示了如何?此功能：
列表A中的HTML代碼建立了一個包括四個按鈕的菜單條，每一個按鈕都有三種狀態：正常、滑鼠懸浮和單擊。觸發條件如下：
滑鼠指標移動到處於正常狀態的按鈕，按鈕則變為滑鼠懸浮狀態。滑鼠移出按鈕地區之後，按鈕返回到正常狀態。
按一下滑鼠按鈕，按鈕則變為單擊狀態。在另一按鈕被單擊之前，它將保持在此狀態。
如果單擊了某個按鈕，其他任何按鈕不能處於單擊狀態，只能是處於滑鼠懸浮或正常狀態。
每次只能單擊一個按鈕。
每次只能有一個按鈕處於滑鼠懸浮狀態。
首要任務是設定儲存菜單每種狀態圖片的數組。數組元素相應的元素<img>同樣在HTML文檔主體中建立，並且按照順序命名。請注意，數組值的索引序列是從0開始，而相應的<img>元素則從1開始命名——這就要求在指令碼的後半段要對相應數值作運算調整。
函數preloadImages()負責將所有圖片裝載到緩衝中，因此留給滑鼠的回應時間就會很少。迴圈for()被用來在第一階段重複完成圖片建立操作，並隨後對每個圖片進行預裝載。
函數resetAll()是將所有圖片重設為正常狀態的非常方便的方法。這是必需的，因為當菜單上某個按鈕被單擊的時候，菜單上面其他所有按鈕在被單擊按鈕改變狀態前必須恢複到正常狀態。
函數setNormal()、setHover()以及setClick()負責將特定映像（映像編號將作為函數參數傳遞）的圖片源改變為相應正常、滑鼠懸浮或單擊狀態的圖片源。由於被單擊的映像在另一映像被單擊之前必須保持狀態（參考規則#2），因此被單擊圖片將暫不接受滑鼠動作。函數setNormal()以及setHover()代碼僅完成圖片不在單擊狀態的情況下改變圖片狀態的動作。
以上只是通過使用預裝載技術加速JavaScript效果響應多種辦法中的一種。在網站中可以使用以上技術，並且根據實際情況進行調整。祝一切順利！
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
