首頁 >web前端 >js教程 >利用CSS、JavaScript及Ajax實現高效的圖片預載_javascript技巧

利用CSS、JavaScript及Ajax實現高效的圖片預載_javascript技巧

WBOY
WBOY原創
2016-05-16 17:19:44926瀏覽

方法一:用CSS和JavaScript實作預先載入

實作預先載入圖片有很多方法,包括使用CSS、JavaScript及兩者的各種組合。這些技術可依不同設計場景設計出對應的解決方案,十分高效。
單純使用CSS,可輕鬆、有效率地預先載入圖片,程式碼如下:

複製程式碼 程式碼如下:

#preload-01 { background: url(http://domain.tld/image-01.png) no-repeat -9999px -9999px; }
#preload-02 { background: url (http://domain.tld/image-02.png) no-repeat -9999px -9999px; }
#preload-03 { background: url(http://domain.tld/image-03.png) no-repeat -9999px -9999px; }

將這三個ID選擇器應用到(X)HTML元素中,我們便可透過CSS的background屬性將圖片預先載入到螢幕外的背景上。只要這些圖片的路徑保持不變,當它們在Web頁面的其他地方被呼叫時,瀏覽器就會在渲染過程中使用預先載入(快取)的圖片。簡單、高效,不需要任何JavaScript。
此方法雖然高效,但仍有改進空間。使用該法加載的圖片會與頁面的其他內容一起加載,增加了頁面的整體加載時間。為了解決這個問題,我們增加了一些JavaScript程式碼,來推遲預先載入的時間,直到頁面載入完畢。程式碼如下:
複製程式碼 程式碼如下:

// better image loading http://perishablepress.com/press/2009/12/28/ 3-ways-preload-images-css-javascript-ajax/
function preloader() {
if (document.getElementById) {
document.getElementById("preload-01"). style.background = "url(http://domain.tld/image-01.png) no-repeat -9999px -9999px";
document.getElementById("preload-02").style.background = "url (http://domain.tld/image-02.png) no-repeat -9999px -9999px";
document.getElementById("preload-03").style.background = "url(http://domain .tld/image-03.png) no-repeat -9999px -9999px";
}
}
function addLoadEvent(func) {
var oldonload = window.onloadif>; typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload( );
}
func();
}
}
}
addLoadEvent(preloader);

在這個腳本的第一部分,我們取得使用類別選擇器的元素,並為其設定了background屬性,以預先載入不同的圖片。
該腳本的第二部分,我們使用addLoadEvent()函數來延遲preloader()函數的載入時間,直到頁面載入完畢。
如果JavaScript無法在使用者的瀏覽器中正常執行,會發生什麼事?很簡單,圖片不會被預先加載,當頁面調用圖片時,正常顯示即可。


方法二:僅使用JavaScript實作預先載入
上述方法有時確實很高效,但我們逐漸發現它在實際實作過程中會耗費太多時間。相反,我更喜歡使用純JavaScript來實現圖片的預先載入。下面將提供兩種這樣的預先載入方法,它們可以很漂亮地工作於所有現代瀏覽器之上。

JavaScript程式碼段1

只需簡單編輯、載入所需要圖片的路徑與名稱即可,很容易實作:

複製程式碼 程式碼如下:



此方法尤其適用預先載入大量的圖片。我的畫廊網站使用該技術,預先載入圖片數量達50多張。將該腳本套用到登入頁面,只要使用者輸入登入帳號,大部分畫廊圖片將會預先載入。

JavaScript程式碼段2

此方法與上面的方法類似,也可以預先載入任意數量的圖片。將下面的腳本加入任何Web頁中,根據程式指令進行編輯即可。
複製程式碼 程式碼如下:

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn