首頁 > 開發者 > JavaScript
映像的預先載入
瀏覽器通常的工作方式是：只有當要求載入映像的HTTP請求被發送的時候，映像才會被載入，而不論它是被動地通過<img>標記載入，還是主動地通過方法調用載入。所以，如果你有一段JavaScript，需要在滑鼠移至上方的時候切換映像，或者在逾時之後自動地更換映像，那麼你就可能會在從伺服器取回映像的時候隨時碰到等待，時間會從數秒鐘到幾分鐘不等。當你以較慢的速度串連到Internet上的時候，或者被取回的映像非常巨大的時候，這種狀況尤其顯著，而這種資料延遲通常都會毀掉你所期望的效果。
有些瀏覽器會試圖轉嫁這一問題，比如把映像儲存在本地緩衝區裡，這樣以後對它的調用就能夠很快進行了，但是需要第一次調用映像的時候仍然會產生延遲。預先載入是一項在需要映像之前就把它下載到緩衝區裡的技術。通過這種方式，當真的需要映像的時候，它可以被從緩衝區裡取出來，並立即顯示出來。
Image()對象
預先載入映像最簡單的方法用JavaScript將一個新的Image()對象執行個體化，並把你想要預先載入的映像的URL傳遞給它。假設我們有一個叫做http://www.host01.com/Get/jsp/00040004/heavyimagefile.jpg的映像，我們希望，當使用者把滑鼠放在一個已經顯示過的映像上的時，系統能夠顯示出這個映像。為了預先載入這個映像，以便實現更快的回應時間，我們只用建立一個新的Image()對象，將其命名為heavyImage，並使用onLoad()事件處理常式把它同時載入到頁面上。
<html><head><script language = "JavaScript">function preloader() {heavyImage = new Image(); heavyImage.src="http://www.host01.com/Get/jsp/00040004/heavyimagefile.jpg";}</script></head><body onLoad="javascript:preloader()"><a href="#" onMouseOver="javascript:document.img01.src='http://www.host01.com/Get/jsp/00040004/heavyimagefile.jpg'"><img name="img01" src=http://www.host01.com/Get/jsp/00040004/"justanotherfile.jpg"></a></body></html>
要注意的是，映像標記自身並不會處理onMouseOver()和onMouseOut()事件，這就是為什麼上面例子裡的<img>標記被放在一個<a>標記裡，後者的確加入了對這些事件類型的支援。
用數組載入多個映像
在實際操作中，你可能需要預先載入一幅以上的映像；例如，在包含有多個映像翻滾（rollover）的菜單條裡，或者如果你正在嘗試建立平滑的動態效果。這並不困難；你所需要做的就是使用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()對象，這樣就能夠把它預先載入到緩衝區裡。
onLoad()事件處理常式
就和JavaScript裡的其它很多個物件一樣，Image()對象也帶有多個事件處理常式。這其中最有用的毫無疑問的就是onLoad()處理常式了，它會在完成映像載入的時候被調用。這個處理常式可以與自訂的函數一起使用，以便在完成映像載入之後進行特定的任務。下面的例子通過在映像載入的時候顯示“請等待（please wait）”提示資訊來說明這個問題，然後在映像完成載入之後就向瀏覽器發送一個新的URL。
<html><head><script language="JavaScript">// create an image objectobjImage = new Image(); // set what happens once the image has loaded objImage.onLoad=imagesLoaded(); // preload the image fileobjImage.src='http://www.host01.com/Get/jsp/00040004/images/image1n.gif';// function invoked on image loadfunction imagesLoaded(){ document.location.href='index2.html';}</script></head><body>Please wait, loading images...</body></html>
當然，你還可以建立一個映像數組，對它進行迴圈，預先載入每個映像，並在每個階段對已載入映像的數量保持跟蹤。一旦載入了所有的映像，事件處理常式就能夠按照設定把瀏覽器帶到下一個頁面（或者進行其他的任務）。
預先載入與多狀態菜單
現在，把你剛剛學到的理論付諸真正的實踐怎麼樣？下面一部分內容就是我碰巧編寫的一段代碼——一個由多個按鈕（映像連結）組成的菜單條——其中每個按鈕都可能處於三種狀態中的一種：正常（normal）、hover（懸停）和點擊（click）。由於所有的按鈕都有多個狀態，所以就有必要使用映像預先載入來確保菜單能夠根據其切換到的狀態進行快速的響應。列表A裡的代碼就說了這一點。
列表A裡的HTML代碼會建立一個由四個按鈕組成的菜單條，每個按鈕都有三種狀態：正常、懸停和點擊。其要求如下：
但滑鼠移動到處於正常狀態的按鈕上時，按鈕會變為懸停狀態。當滑鼠移開的時候，按鈕又會恢複到正常狀態。
當滑鼠點擊按鈕的時候，按鈕就會變為點擊狀態。它會一直保持這個狀態，直到另外一個按鈕被點擊。
如果有一個按鈕被點擊，那麼其他的按鈕就都不能處於點擊狀態。其他的按鈕只能夠處於懸停或者正常狀態。
一次只能有一個按鈕可以被點擊。
一次只能有一個按鈕處於懸停狀態。
第一項任務是建立儲存有菜單每個狀態的映像的數組。與這些數組元素相對應的<img>元素也都在HTML文檔的主體裡被建立，並按順序命名。要注意的是，對數組值的索引是從0開始的，而相應的<img>元素是從1開始命名的——這就需要在指令碼後面的一段裡進行某種計算上的調整。
PreloadImages()函數會負責把所有的映像都載入到緩衝區裡，這樣的話對滑鼠移動的回應時間會被減到最小。一個for()迴圈被用在第一步裡建立的映像裡進行迭代，並預先載入每一個映像。
ResetAll()函數是把所有映像恢複都到它們正常狀態的方便方法。這是有必要的，因為當菜單的項目被點擊的時候，菜單裡其他所有的項目都必須在被點擊項目能夠切換到點擊狀態之前恢複到正常狀態。
SetNormal()、setHover()和setClick()函數負責把特定映像（映像的編號被作為函數的自變數進行傳遞）的來源分別改為正常、懸停或者點擊狀態。由於被點擊的映像必須一直保持點擊狀態，直到另外一個映像被點擊（見第二項要求），所以它們暫時不會對滑鼠移動作出反應；這樣的話，如果按鈕還不是處在點擊狀態，那麼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
