快捷導(dǎo)航

js預(yù)載入和JavaScript Image()對(duì)象使用介紹

更新時(shí)間：2011年08月28日 17:41:52 作者：

為了解決在canvas使用drawImage()時(shí),遇到img對(duì)象來(lái)不及加載的問(wèn)題; 我最終在html文檔加載中,使用了下面"數(shù)組加載圖像的辦法”解決,如果有其他方法,請(qǐng)給予指點(diǎn)!

預(yù)載入和JavaScript Image()對(duì)象

很多high-res圖像真的可以使 Web 站點(diǎn)更加整潔。但是它們也會(huì)使站點(diǎn)的訪問(wèn)速度變慢——圖像是文件，文件使用帶寬，帶寬直接與等待時(shí)間相關(guān)。是該了解如何通過(guò)一個(gè)叫做圖像預(yù)載入（preloading）的技巧來(lái)提高 Web 站點(diǎn)的訪問(wèn)速度的時(shí)候了。
圖像預(yù)載入
對(duì)于瀏覽器載入圖像來(lái)說(shuō)，只有在對(duì)圖像發(fā)送一個(gè) HTTP請(qǐng)求之后，它們才會(huì)被瀏覽器載入，對(duì)圖像的 HTTP 請(qǐng)求要么使用＜img＞標(biāo)記，要么通過(guò)方法調(diào)用實(shí)現(xiàn)。如果使用 JavaScript 腳本來(lái)處理在 mouseover 事件時(shí)交換圖像，或者在一段時(shí)間之后自動(dòng)更改圖像，那么在從服務(wù)器獲取圖像時(shí)可能要等上幾秒鐘到幾分鐘的時(shí)間。如果使用一個(gè)慢速的 Internet 連接，或者要獲取的圖像非常大，或者其它一些情況，這種現(xiàn)象就特別明顯；這樣，延遲就造成你不能達(dá)到自己期望的效果。
一些瀏覽器采用一些措施來(lái)緩解這一問(wèn)題，比如試圖通過(guò)在本地緩存中存儲(chǔ)圖像，從而使隨后對(duì)圖像的調(diào)用能夠立即被滿足；但是在圖像第一次被調(diào)用時(shí)依然會(huì)存在一些延遲。預(yù)載入是在需要圖像之前將其下載到緩存的一種方法。通過(guò)這一措施，當(dāng)真正需要圖像時(shí)，它就可以被立即從緩存中取出，從而能夠立即顯示。
Image() 對(duì)象
預(yù)載入圖像最簡(jiǎn)單的方法是在 JavaScript 中實(shí)例化一個(gè)新 Image() 對(duì)象，然后將需要載入的圖像的 URL 作為參數(shù)傳入。假設(shè)我們有一個(gè)圖像叫做heavyimagefile.jpg，在用戶的鼠標(biāo)放到一個(gè)已經(jīng)顯示的圖像之上時(shí)，我們希望顯示這個(gè)圖像。為了預(yù)載入這一圖像從而得到較快的響應(yīng)時(shí)間，我們簡(jiǎn)單地創(chuàng)建一個(gè) Image() 對(duì)象 heavyImage，然后在 onLoad() 事件處理器中將其同時(shí)載入。

復(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> 

請(qǐng)注意，圖像標(biāo)記本身不能處理 onMouseOver() 和 onMouseOut() 事件，這就是上例中<img> 標(biāo)記被包含在一個(gè)<a> 標(biāo)記之中的原因，<a> 標(biāo)記支持這兩個(gè)事件類(lèi)型。
使用數(shù)組載入多個(gè)圖像
在實(shí)際應(yīng)用中，我們可能需要預(yù)載入多個(gè)圖像，而不止一個(gè)；例如，在一個(gè)包含多個(gè)圖像翻卷的菜單欄中，或者在我們?cè)噲D創(chuàng)建平滑效果時(shí)，都需要預(yù)載入多個(gè)圖像。其實(shí)這并不困難，只要使用 JavaScript 的數(shù)組即可實(shí)現(xiàn)，如下例所示：

復(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> 

在上面的例子中，我們定義一個(gè)變量 i和一個(gè) Image() 對(duì)象 imageObj。然后定義了一個(gè)新數(shù)組 images[]，每個(gè)數(shù)組元素存儲(chǔ)要被預(yù)載入的圖像。最后，創(chuàng)建一個(gè) for() 循環(huán)來(lái)處理整個(gè)數(shù)組，并將每個(gè)元素賦給 Image() 對(duì)象，這樣將其載入到緩存中。
onLoad() 事件處理器
像很多 JavaScript 的其它對(duì)象一樣，Image() 對(duì)象也有一些事件處理器。其中最有用的一個(gè)肯定是 onLoad() 處理器，它在圖像完全載入之后調(diào)用。這個(gè)事件處理器可以與一個(gè)自定義函數(shù)聯(lián)系起來(lái)，以在圖像完全載入之后執(zhí)行一些特定的任務(wù)。下面的例子說(shuō)明了這一點(diǎn)，在這個(gè)例子中，首先在圖像載入時(shí)顯示一個(gè)“please wait”屏幕，然后在載入完成時(shí)將瀏覽器轉(zhuǎn)到一個(gè)新的 URL。

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

 
<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='images/image1n.gif'; 
// function invoked on image load 
function imagesLoaded() 
{ 
document.location.href='index2.html'; 
} 
</script> 
</head> 
<body> 
Please wait, loading images... 
</body> 
</html> 

當(dāng)然，你還可以創(chuàng)建一個(gè)圖像數(shù)組然后在其上進(jìn)行循環(huán)操作，預(yù)載入每個(gè)圖像，然后在每一階段跟蹤被載入圖像的數(shù)目。一旦所有圖像載入完畢，根據(jù)事件處理器的程序邏輯，它就可以將瀏覽器帶入下一個(gè)頁(yè)面（或者執(zhí)行其它任務(wù)）。
預(yù)載入和多狀態(tài)菜單
現(xiàn)在，如何在實(shí)際應(yīng)用程序中使用所有你學(xué)到的理論？下面的這段代碼是我最近偶爾編寫(xiě)的一個(gè)菜單欄，這個(gè)菜單欄由一些按鈕（圖像鏈接）組成，每個(gè)按鈕具有三種狀態(tài)：正常、懸停和點(diǎn)擊。因?yàn)榘粹o具有多種狀態(tài)，所以很有必要使用圖像預(yù)載入，以保證菜單的狀態(tài)能夠快速地反應(yīng)。清單A中的代碼說(shuō)明了實(shí)現(xiàn)方法。
清單A 中的HTML 代碼設(shè)置了一個(gè)由四個(gè)按鈕組成的菜單，每個(gè)按鈕具有三種狀態(tài)：正常、懸停和點(diǎn)擊。需求如下：
# 當(dāng)鼠標(biāo)移動(dòng)到一個(gè)正常狀態(tài)下的按鈕之上時(shí)，它變?yōu)閼彝顟B(tài)。在鼠標(biāo)離開(kāi)之后，按鈕恢復(fù)為正常狀態(tài)。
# 在鼠標(biāo)點(diǎn)擊一個(gè)按鈕時(shí)，按鈕變?yōu)辄c(diǎn)擊狀態(tài)。在其它按鈕被點(diǎn)擊之前，它將保留這一狀態(tài)。
# 如果一個(gè)按鈕被點(diǎn)擊，其它按鈕的狀態(tài)都不能為點(diǎn)擊狀態(tài)。其它按鈕只能為懸停狀態(tài)或正常狀態(tài)。
# 在同一時(shí)間只能有一個(gè)按鈕被點(diǎn)擊。
# 在同一時(shí)間只能有一個(gè)按鈕處于懸停狀態(tài)。
第一個(gè)任務(wù)是設(shè)置數(shù)組，用于保存菜單每個(gè)狀態(tài)的圖像。與這些數(shù)組元素對(duì)應(yīng)的＜img＞也在 HTML 文檔正文（body）中創(chuàng)建，并順序地命名。請(qǐng)注意，數(shù)組值的索引是從0開(kāi)始的，雖然對(duì)應(yīng)的＜img＞元素的命名是從1開(kāi)始的——這樣就需要在腳本后面的部分進(jìn)行計(jì)算調(diào)整。
函數(shù) preloadImage() 負(fù)責(zé)將所有的圖像存儲(chǔ)到緩存中，以使鼠標(biāo)運(yùn)動(dòng)的響應(yīng)時(shí)間最小。for() 循環(huán)用于迭代第一步創(chuàng)建的圖像，并在每次迭代中預(yù)載入一個(gè)圖像。

您可能感興趣的文章: