快捷導(dǎo)航

js 利用image對(duì)象實(shí)現(xiàn)圖片的預(yù)加載提高訪問(wèn)速度

更新時(shí)間：2013年03月29日 16:53:58 作者：

我們來(lái)學(xué)習(xí)一種名為圖像預(yù)裝載（image preloading）的小技巧來(lái)提高圖像訪問(wèn)速度，一些瀏覽器試圖通過(guò)在本地緩存中保存這些圖片來(lái)解決此問(wèn)題，感興趣的朋友可以了解下

大量采用高解析度的圖像的確可以讓一個(gè)Web站點(diǎn)容光煥發(fā)。但同樣也會(huì)造成站點(diǎn)訪問(wèn)速度下降——圖片是文件，文件就要占用帶寬，而帶寬直接同訪問(wèn)等待時(shí)間相關(guān)?，F(xiàn)在，讓我們來(lái)學(xué)習(xí)一種名為圖像預(yù)裝載（image preloading）的小技巧來(lái)提高圖像訪問(wèn)速度。

一些瀏覽器試圖通過(guò)在本地緩存中保存這些圖片來(lái)解決此問(wèn)題。這樣一來(lái)可以順序調(diào)用這些圖片——但對(duì)于首次使用這些圖片的時(shí)候仍然會(huì)存在延時(shí)。預(yù)裝載就是一種在需要圖片之前就將圖片下載到緩存的技術(shù)。采用這樣的方式可以使當(dāng)確實(shí)需要顯示圖片時(shí)迅速將其從緩存中恢復(fù)回來(lái)并立即顯示。

Image()對(duì)象
最簡(jiǎn)單的圖像預(yù)裝載辦法是使用JavaScript新建一個(gè)新的Image()對(duì)象，然后將希望預(yù)裝載的圖片URL傳遞給此對(duì)象。假設(shè)我們擁有一個(gè)名為heavyimagefile.jpg的圖片文件，我們希望當(dāng)用戶(hù)鼠標(biāo)指針移動(dòng)到一張已有的圖片上時(shí)顯示此文件。為了能更快的對(duì)此文件進(jìn)行預(yù)裝載，我們簡(jiǎn)單的創(chuàng)建了一個(gè)名為heavyImage的新Image() 對(duì)象，然后將其通過(guò)onLoad()事件句柄同步裝載到頁(yè)面上。

復(fù)制代碼代碼如下:

 
<html> 
<head> 
<script language = "JavaScript"> 
function preloader() 
{ 
heavyImage = new Image(); 
heavyImage.src = "heavyimagefile.jpg"; 
} 
</script> 
</head> 
<body onLoad="javascript:preloader()"> 
<a href="#" onMouseOver="javascript:document.img01.src='heavyimagefile.jpg'"> 
<img name="img01" src="justanotherfile.jpg"></a> 
</body> 
</html> 

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

通過(guò)數(shù)組（arrays）裝載多個(gè)圖片
在實(shí)際情況中，你很有可能需要預(yù)裝載不止一張的圖片；比如，對(duì)于包括多個(gè)圖片的菜單條，或者希望實(shí)現(xiàn)平滑的動(dòng)畫(huà)效果。要實(shí)現(xiàn)這些并不困難，只需要利用JavaScript的數(shù)組，如下例所示：

復(fù)制代碼代碼如下:

 
<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()對(duì)象。然后定義了新數(shù)組images[]，每一個(gè)數(shù)組元素將存儲(chǔ)需要預(yù)裝載圖片的地址來(lái)源。最后，使用一個(gè)for()循環(huán)來(lái)遍歷整個(gè)數(shù)組，并對(duì)每個(gè)元素指定Image()對(duì)象，以此將圖片都預(yù)裝載到緩存中。

您可能感興趣的文章: