|
很多high-res圖像真的能夠使 Web 站點(diǎn)更加整潔。但是他們也會使站點(diǎn)的訪問速度變慢——圖像是文檔，文檔使用帶寬，帶寬直接和等待時間相關(guān)。是該了解如何通過一個叫做圖像預(yù)載入（preloading）的技巧來提高 Web 站點(diǎn)的訪問速度的時候了。 圖像預(yù)載入 對 于瀏覽器載入圖像來說，只有在對圖像發(fā)送一個 HTTP請求之后，他們才會被瀏覽器載入，對圖像的 HTTP 請求要么使用 ＜img＞ 標(biāo)記，要么通過方法調(diào)用實(shí)現(xiàn)。假如使用 Javascrīpt 腳本來處理在 mouseover 事件時交換圖像，或在一段時間之后自動更改圖像，那么在從服務(wù)器獲取圖像時可能要等上幾秒鐘到幾分鐘的時間。假如使用一個慢速的 Internet 連接，或要獲取的圖像很大，或其他一些情況，這種現(xiàn)象就特別明顯；這樣，延遲就造成您不能達(dá)到自己期望的效果。 一些瀏覽器采用一些措施來 緩解這一問題，比如試圖通過在本地緩存中存儲圖像，從而使隨后對圖像的調(diào)用能夠立即被滿足；但是在圖像第一次被調(diào)用時依然會存在一些延遲。預(yù)載入是在需要 圖像之前將其下載到緩存的一種方法。通過這一措施，當(dāng)真正需要圖像時，他就能夠被立即從緩存中取出，從而能夠立即顯示。 Image() 對象 預(yù) 載入圖像最簡單的方法是在 Javascrīpt 中實(shí)例化一個新 Image() 對象，然后將需要載入的圖像的 URL 作為參數(shù)傳入。假設(shè)我們有一個圖像叫做heavyimagefile.jpg，在用戶的鼠標(biāo)放到一個已顯示的圖像之上時，我們希望顯示這個圖像。為了預(yù)載 入這一圖像從而得到較快的響應(yīng)時間，我們簡單地創(chuàng)建一個 Image() 對象 heavyImage，然后在 onLoad() 事件處理器中將其同時載入。 <html> <head> <scrīpt language = "Javascrīpt"> function preloader() { heavyImage = new Image(); heavyImage.src = "heavyimagefile.jpg"; } </scrīpt> </head> <body ōnLoad="javascrīpt:preloader()"> <a href="#" ōnMouseOver="javascrīpt:document.img01.src='heavyimagefile.jpg'"> <img name="img01" src="justanotherfile.jpg"></a> </body> </html> 請注意，圖像標(biāo)記本身不能處理 onMouseOver() 和 onMouseOut() 事件，這就是上例中<img> 標(biāo)記被包含在一個<a> 標(biāo)記之中的原因，<a> 標(biāo)記支持這兩個事件類型。 使用數(shù)組載入多個圖像 在實(shí)際應(yīng)用中，我們可能需要預(yù)載入多個圖像，而不止一個；例如，在一個包含多個圖像翻卷的菜單欄中，或在我們試圖創(chuàng)建平滑效果時，都需要預(yù)載入多個圖像。其實(shí)這并不困難，只要使用 Javascrīpt 的數(shù)組即可實(shí)現(xiàn)，如下例所示： <scrīpt language="Javascrīpt"> 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]; } } </scrīpt> 在 上面的例子中，我們定義一個變量 i和一個 Image() 對象 imageObj。然后定義了一個新數(shù)組 images[]，每個數(shù)組元素存儲要被預(yù)載入的圖像。最后，創(chuàng)建一個 for() 循環(huán)來處理整個數(shù)組，并將每個元素賦給 Image() 對象，這樣將其載入到緩存中。 onLoad() 事件處理器 像很多 Javascrīpt 的其他對象相同，Image() 對象也有一些事件處理器。其中最有用的一個肯定是 onLoad() 處理器，他在圖像完全載入之后調(diào)用。這個事件處理器能夠和一個自定義函數(shù)聯(lián)系起來，以在圖像完全載入之后執(zhí)行一些特定的任務(wù)。下面的例子說明了這一點(diǎn)，在 這個例子中，首先在圖像載入時顯示一個“please wait”屏幕，然后在載入完成時將瀏覽器轉(zhuǎn)到一個新的 URL。 <html> <head> <scrīpt language="Javascrīpt"> // 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'; } </scrīpt> </head> <body> Please wait, loading images... </body> </html> 當(dāng)然，您還能夠創(chuàng)建一個圖像數(shù)組然后在其上進(jìn)行循環(huán)操作，預(yù)載入每個圖像，然后在每一階段跟蹤被載入圖像的數(shù)目。一旦任何圖像載入完畢，根據(jù)事件處理器的程式邏輯，他就能夠?qū)g覽器帶入下一個頁面（或執(zhí)行其他任務(wù)）。 預(yù)載入和多狀態(tài)菜單 現(xiàn) 在，如何在實(shí)際應(yīng)用程式中使用任何您學(xué)到的理論？下面的這段代碼是我最近偶爾編寫的一個菜單欄，這個菜單欄由一些按鈕（圖像鏈接）組成，每個按鈕具備三種 狀態(tài)：正常、懸停和點(diǎn)擊。因?yàn)榘粹o具備多種狀態(tài)，所以很有必要使用圖像預(yù)載入，以確保菜單的狀態(tài)能夠快速地反應(yīng)。清單A中的代碼說明了實(shí)現(xiàn)方法。 清單A 中的HTML 代碼配置了一個由四個按鈕組成的菜單，每個按鈕具備三種狀態(tài)：正常、懸停和點(diǎn)擊。需求如下： # 當(dāng)鼠標(biāo)移動到一個正常狀態(tài)下的按鈕之上時，他變?yōu)閼彝顟B(tài)。在鼠標(biāo)離開之后，按鈕恢復(fù)為正常狀態(tài)。 # 在鼠標(biāo)點(diǎn)擊一個按鈕時，按鈕變?yōu)辄c(diǎn)擊狀態(tài)。在其他按鈕被點(diǎn)擊之前，他將保留這一狀態(tài)。 # 假如一個按鈕被點(diǎn)擊，其他按鈕的狀態(tài)都不能為點(diǎn)擊狀態(tài)。其他按鈕只能為懸停狀態(tài)或正常狀態(tài)。 # 在同一時間只能有一個按鈕被點(diǎn)擊。 # 在同一時間只能有一個按鈕處于懸停狀態(tài)。 第 一個任務(wù)是配置數(shù)組，用于保存菜單每個狀態(tài)的圖像。和這些數(shù)組元素對應(yīng)的 ＜img＞ 也在 HTML 文檔正文（body）中創(chuàng)建，并順序地命名。請注意，數(shù)組值的索引是從0開始的，雖然對應(yīng)的 ＜img＞ 元素的命名是從1開始的——這樣就需要在腳本后面的部分進(jìn)行計算調(diào)整。 函數(shù) preloadImage() 負(fù)責(zé)將任何的圖像存儲到緩存中，以使鼠標(biāo)運(yùn)動的響應(yīng)時間最小。for() 循環(huán)用于迭代第一步創(chuàng)建的圖像，并在每次迭代中預(yù)載入一個圖像。 函數(shù) resetAll() 提供了一種快捷的方式來將任何圖像重置為他們的正常狀態(tài)。這是必要的，因?yàn)樵谝粋€項(xiàng)被點(diǎn)擊時，被點(diǎn)擊的項(xiàng)變?yōu)辄c(diǎn)擊狀態(tài)之前，菜單中的任何其他項(xiàng)都必須置為正常狀態(tài)。 函 數(shù) setNormal()、setHover() 和 setClick() 用于將特定圖像（將圖像編號以一個參數(shù)傳給每個函數(shù)）的狀態(tài)相應(yīng)地改變?yōu)檎?、懸停和點(diǎn)擊。因?yàn)楸稽c(diǎn)擊的圖像在其他對象被點(diǎn)擊之前必須保留他的狀態(tài)（參見 第二個規(guī)則），所以他們臨時不響應(yīng)鼠標(biāo)移動；這樣，setNormal() 和 setHover() 函數(shù)的代碼就只會改變現(xiàn)在不是處于點(diǎn)擊狀態(tài)的按鈕的狀態(tài)。 前面介紹的只是很多預(yù)載入圖像的一種方法，這種方法能夠幫助您提高 Javascrīpt 效果的響應(yīng)速度。您能夠自由地在您的站點(diǎn)中使用前面給出的方法，假如有必要，您能夠根據(jù)自己的需要修改上面的代碼。祝您好運(yùn)！ |
|
|
