js利用image對象實現(xiàn)圖片的預(yù)加載提高訪問速度_javascript技巧
來源：懂視網(wǎng)
責(zé)編：小采
時間：2020-11-27 21:08:01
js利用image對象實現(xiàn)圖片的預(yù)加載提高訪問速度_javascript技巧
js利用image對象實現(xiàn)圖片的預(yù)加載提高訪問速度_javascript技巧:大量采用高解析度的圖像的確可以讓一個Web站點容光煥發(fā)。但同樣也會造成站點訪問速度下降——圖片是文件，文件就要占用帶寬，而帶寬直接同訪問等待時間相關(guān)。現(xiàn)在，讓我們來學(xué)習(xí)一種名為圖像預(yù)裝載（image preloading）的小技巧來提高圖像訪問速度。 一些瀏
導(dǎo)讀js利用image對象實現(xiàn)圖片的預(yù)加載提高訪問速度_javascript技巧:大量采用高解析度的圖像的確可以讓一個Web站點容光煥發(fā)。但同樣也會造成站點訪問速度下降——圖片是文件，文件就要占用帶寬，而帶寬直接同訪問等待時間相關(guān)。現(xiàn)在，讓我們來學(xué)習(xí)一種名為圖像預(yù)裝載（image preloading）的小技巧來提高圖像訪問速度。 一些瀏
大量采用高解析度的圖像的確可以讓一個Web站點容光煥發(fā)。但同樣也會造成站點訪問速度下降——圖片是文件，文件就要占用帶寬，而帶寬直接同訪問等待時間相關(guān)。現(xiàn)在，讓我們來學(xué)習(xí)一種名為圖像預(yù)裝載（image preloading）的小技巧來提高圖像訪問速度。
一些瀏覽器試圖通過在本地緩存中保存這些圖片來解決此問題。這樣一來可以順序調(diào)用這些圖片——但對于首次使用這些圖片的時候仍然會存在延時。預(yù)裝載就是一種在需要圖片之前就將圖片下載到緩存的技術(shù)。采用這樣的方式可以使當(dāng)確實需要顯示圖片時迅速將其從緩存中恢復(fù)回來并立即顯示。
Image()對象
最簡單的圖像預(yù)裝載辦法是使用JavaScript新建一個新的Image()對象，然后將希望預(yù)裝載的圖片URL傳遞給此對象。假設(shè)我們擁有一個名為heavyimagefile.jpg的圖片文件，我們希望當(dāng)用戶鼠標(biāo)指針移動到一張已有的圖片上時顯示此文件。為了能更快的對此文件進(jìn)行預(yù)裝載，我們簡單的創(chuàng)建了一個名為heavyImage的新Image() 對象，然后將其通過onLoad()事件句柄同步裝載到頁面上。
代碼如下:
聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
js利用image對象實現(xiàn)圖片的預(yù)加載提高訪問速度_javascript技巧
js利用image對象實現(xiàn)圖片的預(yù)加載提高訪問速度_javascript技巧:大量采用高解析度的圖像的確可以讓一個Web站點容光煥發(fā)。但同樣也會造成站點訪問速度下降——圖片是文件，文件就要占用帶寬，而帶寬直接同訪問等待時間相關(guān)。現(xiàn)在，讓我們來學(xué)習(xí)一種名為圖像預(yù)裝載（image preloading）的小技巧來提高圖像訪問速度。 一些瀏
