【Javascript】利用CSS、JavaScript及Ajax實現圖片預先載入的三大方法__資料庫

Perishable Press網站近日發表了一篇文章《3 Ways to Preload Images with CSS, JavaScript, or Ajax》，分享了利用CSS、JavaScript及Ajax實現圖片預先載入的三大方法。下面為譯文。

預先載入圖片是提高使用者體驗的一個很好方法。圖片積極式載入到瀏覽器中，訪問者便可順利地在你的網站上衝浪，並享受到極快的載入速度。這對圖片畫廊及圖片佔據很大比例的網站來說十分有利，它保證了圖片快速、無縫地發布，也可協助使用者在瀏覽你網站內容時獲得更好的使用者體驗。本文將分享三個不同的預先載入技術，來增強網站的效能與可用性。

方法一：用CSS和JavaScript實現預先載入

實現預先載入圖片有很多方法，包括使用CSS、JavaScript及兩者的各種組合。這些技術可根據不同設計情境設計出相應的解決方案，十分高效。

單純使用CSS，可容易、高效地預先載入圖片，代碼如下：

1 2 3

#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代碼，來延遲預先載入的時間，直到頁面載入完畢。代碼如下：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

// better image preloading @ <a href="http://perishablepress.com/press/2009/12/28/3-ways-preload-images-css-javascript-ajax/">http://perishablepress.com/press/2009/12/28/3-ways-preload-images-css-javascript-ajax/</a> 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.onload;      if  ( typeof  window.onload !=  'function' ) {          window.onload = func;      }  else  {          window.onload =  function () {              if  (oldonload) {                  oldonload();              }              func();          }      } } addLoadEvent(preloader);

在該指令碼的第一部分，我們擷取使用類別選取器的元素，並為其設定了background屬性，以預先載入不同的圖片。

該指令碼的第二部分，我們使用addLoadEvent()函數來延遲preloader()函數的載入時間，直到頁面載入完畢。

如果JavaScript無法在使用者的瀏覽器中正常運行，會發生什麼。很簡單，圖片不會被預先載入，當頁面調用圖片時，正常顯示即可。