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" οnclick="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對象 　　 }; 　　};

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