首頁 > web前端 > js教程 > js 利用image物件實現圖片的預先載入提高存取速度_javascript技巧

js 利用image物件實現圖片的預先載入提高存取速度_javascript技巧

WBOY
發布: 2016-05-16 17:39:03
原創
1176 人瀏覽過

大量採用高解析度的影像的確可以讓一個Web網站容光煥發。但同樣也會造成站點訪問速度下降——圖片是文件,文件就要佔用頻寬,而頻寬直接同訪問等待時間相關。現在,讓我們來學習一種名為圖像預裝載(image preloading)的小技巧來提高映像存取速度。

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

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

複製代碼 代碼如下:



相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板