大量采用高解析度的圖像的確可以讓一個Web站點容光煥發但同樣也會造成站點訪問速度下降——圖片是文件文件就要占用帶寬而帶寬直接同訪問等待時間相關現在讓我們來學習一種名為圖像預裝載（image preloading）的小技巧來提高圖像訪問速度
一些浏覽器試圖通過在本地緩存中保存這些圖片來解決此問題這樣一來可以順序調用這些圖片——但對於首次使用這些圖片的時候仍然會存在延時預裝載就是一種在需要圖片之前就將圖片下載到緩存的技術采用這樣的方式可以使當確實需要顯示圖片時迅速將其從緩存中恢復回來並立即顯示
Image()對象
最簡單的圖像預裝載辦法是使用JavaScript新建一個新的Image()對象然後將希望預裝載的圖片URL傳遞給此對象假設我們擁有一個名為heavyimagefilejpg的圖片文件我們希望當用戶鼠標指針移動到一張已有的圖片上時顯示此文件為了能更快的對此文件進行預裝載我們簡單的創建了一個名為heavyImage的新Image() 對象然後將其通過onLoad()事件句柄同步裝載到頁面上
<html>
<head>
<script language = JavaScript>
function preloader()
{
heavyImage = new Image();
heavyImagesrc = heavyimagefilejpg;
}
</script>
</head>
<body onLoad=javascript:preloader()>
<a # onMouseOver=javascript:documentimgsrc=heavyimagefilejpg>
<img name=img src=justanotherfilejpg></a>
</body>
</html>
注意圖片的標簽（tag）本身並不處理onMouseOver()以及onMouseOut()事件這也正是上面示例中的<img>標簽被包括在<a>標簽中的原因標簽<a>則包括了對這些事件類型的支持
通過數組（arrays）裝載多個圖片
在實際情況中你很有可能需要預裝載不止一張的圖片比如對於包括多個圖片的菜單條或者希望實現平滑的動畫效果要實現這些並不困難只需要利用JavaScript的數組如下例所示
<script language=JavaScript>
function preloader()
{
// counter
var i = ;
// create object
imageObj = new Image();
// set image list
images = new Array();
images[]=imagejpg
images[]=imagejpg
images[]=imagejpg
images[]=imagejpg
// start preloading
for(i=; i<=; i++)
{
imageObjsrc=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
objImageonLoad=imagesLoaded();
// preload the image file
objImagesrc=images/imagengif;
// function invoked on image load
function imagesLoaded()
{
documentlocation;
}
</script>
</head>
<body>
Please wait loading images
</body>
</html>
當然你也可以創建一個圖片數組然後循環對每個元素進行預裝載然後跟蹤每個階段所裝載的圖片數量一旦所有的圖片都被裝載可以對事件句柄編程以將浏覽器帶入下一個階段（或完成其他的任務）
預裝載和多狀態（MultiState）菜單
現在如何將剛剛學習到的所有理論知識應用到實際的應用程序中？下面是一段我最近編寫的代碼——一個包括按鈕（圖片鏈接）的菜單條每一個按鈕都可能處於三種狀態中的一種正常鼠標懸浮和單擊由於按鈕具有多種狀態所以必須使用圖片預裝載來確保菜單能足夠快的對狀態改變進行響應列表A中的代碼顯示了如何實現此功能
列表A中的HTML代碼建立了一個包括四個按鈕的菜單條每一個按鈕都有三種狀態正常鼠標懸浮和單擊觸發條件如下
鼠標指針移動到處於正常狀態的按鈕按鈕則變為鼠標懸浮狀態鼠標移出按鈕區域之後按鈕返回到正常狀態
鼠標單擊按鈕按鈕則變為單擊狀態在另一按鈕被單擊之前它將保持在此狀態
如果單擊了某個按鈕其他任何按鈕不能處於單擊狀態只能是處於鼠標懸浮或正常狀態
每次只能單擊一個按鈕
每次只能有一個按鈕處於鼠標懸浮狀態
首要任務是設置存儲菜單每種狀態圖片的數組數組元素相應的元素<img>同樣在HTML文檔主體中創建並且按照順序命名請注意數組值的索引序列是從開始而相應的<img>元素則從開始命名——這就要求在腳本的後半段要對相應數值作運算調整
函數preloadImages()負責將所有圖片裝載到緩存中因此留給鼠標的響應時間就會很少循環for()被用來在第一階段重復完成圖片創建操作並隨後對每個圖片進行預裝載
函數resetAll()是將所有圖片重置為正常狀態的非常方便的方法這是必需的因為當菜單上某個按鈕被單擊的時候菜單上面其他所有按鈕在被單擊按鈕改變狀態前必須恢復到正常狀態
函數setNormal()setHover()以及setClick()負責將特定圖像（圖像編號將作為函數參數傳遞）的圖片源改變為相應正常鼠標懸浮或單擊狀態的圖片源由於被單擊的圖像在另一圖像被單擊之前必須保持狀態（參考規則#）因此被單擊圖片將暫不接受鼠標動作函數setNormal()以及setHover()代碼僅完成圖片不在單擊狀態的情況下改變圖片狀態的動作
以上只是通過使用預裝載技術加速JavaScript效果響應多種辦法中的一種在站點中可以使用以上技術並且根據實際情況進行調整祝一切順利！
From:http://tw.wingwit.com/Article/program/Java/JSP/201311/19357.html
