預裝載以及JavaScript Image()對象|蘿卜系統下載站

大量采用高解析度的圖像的確可以讓一個Web站點容光煥發。但同樣也會造成站點訪問速度下降——圖片是文件，文件就要占用帶寬，而帶寬直接同訪問等待時間相關�，F在，讓我們來學習一種名為圖像預裝載（image preloading）的小技巧來提高圖像訪問速度。

一些瀏覽器試圖通過在本地緩存中保存這些圖片來解決此問題。這樣一來可以順序調用這些圖片——但對于首次使用這些圖片的時候仍然會存在延時。預裝載就是一種在需要圖片之前就將圖片下載到緩存的技術。采用這樣的方式可以使當確實需要顯示圖片時迅速將其從緩存中恢復回來并立即顯示。

Image()對象
最簡單的圖像預裝載辦法是使用JavaScript新建一個新的Image()對象，然后將希望預裝載的圖片URL傳遞給此對象。假設我們擁有一個名為http://www.okasp.com/techinfo/heavyimagefile.jpg的圖片文件，我們希望當用戶鼠標指針移動到一張已有的圖片上時顯示此文件。為了能更快的對此文件進行預裝載，我們簡單的創建了一個名為heavyImage的新Image() 對象，然后將其通過onLoad()事件句柄同步裝載到頁面上。

<html>

<head>

function preloader()

{

heavyImage = new Image();

heavyImage.src = "http://www.okasp.com/techinfo/heavyimagefile.jpg";

}

</script>

</head>

</body>

</html>

注意，圖片的標簽（tag）本身并不處理onMouseOver()以及onMouseOut()事件，這也正是上面示例中的<img>標簽被包括在<a>標簽中的原因。標簽<a>則包括了對這些事件類型的支持。

通過數組（arrays）裝載多個圖片

在實際情況中，你很有可能需要預裝載不止一張的圖片；比如，對于包括多個圖片的菜單條，或者希望實現平滑的動畫效果。要實現這些并不困難，只需要利用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()對象，以此將圖片都預裝載到緩存中。

Preloading and the JavaScript Image() object

onLoad()事件句柄（event handler）
同JavaScript中的許多其他對象一樣，Image()對象同樣有許多事件句柄。毫無疑問，其中最有用的是onLoad()句柄，它在圖片完全裝載時被調用。在圖片完全裝載之后，可以通過自定義函數來調用此句柄完成特定的功能。下例就給出了采用這樣的方法實現如下動作的代碼：當裝載圖片時顯示“please wait”屏幕，然后一旦完成裝載，就把瀏覽器引導到一個新的URL。

<html>

<head>

// create an image object

objImage = new Image();

// set what happens once the image has loaded

objImage.onLoad=imagesLoaded();

// preload the image file

objImage.src='http://www.okasp.com/techinfo/images/image1n.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效果響應多種辦法中的一種。在站點中可以使用以上技術，并且根據實際情況進行調整。祝一切順利！

溫馨提示：喜歡本站的話，請收藏一下本站！

當前位置:蘿卜系統下載站 > 技術開發教程 > 詳細頁面

預裝載以及JavaScript Image()對象

本類教程下載

系統下載排行