javascript圖片瀏覽器的核心——圖片預先載入

網站開發時經常需要在某個頁面需要實現對大量圖片的瀏覽，如果考慮流量的話，大可以像pconline一樣每個頁面只顯示一張圖片，讓使用者每看一張圖片就需要 重新下載一下整個頁面。不過，在web2.0時代，更多人願意用javascript來實現一個圖片瀏覽器，讓使用者無需等待過長的時間就能看到其他圖片。

知道了一張圖片的地址，需要把它在一個固定大小的html容器（可以是div等）裡邊顯示出來，最重要的當然是需要知道這張即將顯示的圖片的寬和高，然後再結合容器的寬和高，按照一定的縮放比例使圖片顯示出來。因此，實現圖片預先載入就成為圖片瀏覽器的核心功能了。

做過圖片翻轉效果的朋友其實都知道，要讓圖片輪換的時候不出現等待，最好是先讓圖片下載到本地，讓瀏覽器緩衝起來。這時，一般都會用到js裡邊的Image對象。一般的手段無非這樣：

function preLoadImg(url) {
  var img = new Image();
  img.src = url;
}

通過調用preLoadImg函數，傳入圖片的url，就能使圖片預先下載下來了。實際上，這裡用到的預下載功能也和這基本一致。圖片預下載下來後，通過
img的width和height屬性，就能知道圖片的寬和高了。但是需要考慮到，在做圖片瀏覽器功能時，圖片都是即時顯示的。比如你點了顯示的按鈕，這
個時候才會調用上邊類似的代碼來載入圖片。因此，如果你直接用img.width的時候，圖片還沒有完全下載下來。因此，需要用一些非同步方法，等到圖片
下載完畢的時候才會再對img的width和height進行調用。

實現這樣的非同步方法呼叫實際上不難，圖片的下載完畢事件也很簡單，就是簡單的onload事件。因此，我們可以寫出下面的代碼：

function loadImage(url, callback) {
  var img = new Image();
  img.src = url;

  img.onload = function(){ //圖片下載完畢時非同步呼叫callback函數。
    callback.call(img);   // 將callback函數this指標切換為img。
  };
}

好了，再來寫一個測試案例。

function imgLoaded(){
  alert(this.width);
}
<input type="button" value="loadImage" onclick="loadImage('aaa.jpg',imgLoaded)"/>

在firefox中測試一下，發現不錯，果然和預想的效果一樣，在圖片下載後，就會彈出圖片的寬度來。無論點擊多少次或者重新整理結果都一樣。

不過，做到這一步，先別高興太早——還需要考慮一下瀏覽器的相容性，於是，趕緊到ie裡邊測試一下。沒錯，同樣彈出了圖片的寬度。但是，再點擊load的時候，情況就不一樣了，什麼反應都沒有了。重新整理一下，也同樣如此。

經過對多個瀏覽器版本的測試，發現ie6、opera都會這樣，而firefox和safari則表現正常。其實，原因也挺簡單的，就是因為瀏覽器的緩衝
了。當圖片載入過一次以後，如果再有對該圖片的請求時，由於瀏覽器已經緩衝住這張圖片了，不會再發起一次新的請求，而是直接從緩衝中載入過來。對於
firefox和safari，它們視圖使這兩種載入方式對使用者透明，同樣會引起圖片的onload事件，而ie和opera則忽略了這種同一性，不會引
起圖片的onload事件，因此上邊的代碼在它們裡邊不能得以實現效果。

怎麼辦呢？最好的情況是Image可以有一個狀態值表明它是否已經載入成功了。從緩衝載入的時候，因為不需要等待，這個狀態值就直接是表明已經下載了，而從http請求載入時，因為需要等待下載，這個值顯示為未完成。這樣的話，就可以搞定了。

經過一些分析，終於發現一個為各個瀏覽器所相容的Image的屬性——complete。所以，在圖片onload事件之前先對這個值做一下判斷即可。最後，代碼變成如下的樣子：

function loadImage(url, callback) {
    var img = new Image(); //建立一個Image對象，實現圖片的預下載
    img.src = url;
   
    if (img.complete) { // 如果圖片已經存在於瀏覽器緩衝，直接調用回呼函數
        callback.call(img);
        return; // 直接返回，不用再處理onload事件
    }

    img.onload = function () { //圖片下載完畢時非同步呼叫callback函數。
        callback.call(img);//將回呼函數的this替換為Image對象
    };
};

經過這麼一番折騰，總算是讓各個瀏覽器都能滿足我們的目標了。雖然代碼很簡單，但是卻把圖片瀏覽器中最核心的問題解決掉了，接下來你所要做的，僅僅是圖片如何呈現的問題了。