大量採用高解析度的影像的確可以讓一個Web網站容光煥發。但同樣也會造成站點訪問速度下降——圖片是文件,文件就要佔用頻寬,而頻寬直接同訪問等待時間相關。現在,讓我們來學習一種名為圖像預裝載(image preloading)的小技巧來提高映像存取速度。
一些瀏覽器試圖透過在本地快取中保存這些圖片來解決此問題。這樣一來可以順序調用這些圖片——但對於首次使用這些圖片的時候仍然會存在延時。預先裝載就是一種在需要圖片之前就將圖片下載到快取的技術。採用這樣的方式可以使當確實需要顯示圖片時迅速將其從快取中恢復回來並立即顯示。
Image()對象
最簡單的圖像預裝載辦法是使用JavaScript新建一個新的Image()對象,然後將希望預先裝載的圖片URL傳遞給此對象。假設我們擁有一個名為heavyimagefile.jpg的圖片文件,我們希望當使用者滑鼠指標移動到一張已有的圖片上時顯示此文件。為了能更快的對此文件進行預先裝載,我們簡單的創建了一個名為heavyImage的新Image() 對象,然後將其透過onLoad()事件句柄同步裝載到頁面上。