網站開發時經常需要在某個頁面需要實作對大量圖檔的浏覽,如果考慮流量的話,大可以像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對象
};
};
經過這麼一番折騰,總算是讓各個浏覽器都能滿足我們的目标了。雖然代碼很簡單,但是卻把圖檔浏覽器中最核心的問題解決掉了,接下來你所要做的,僅僅是圖檔如何呈現的問題了。
======================================================
在最後，我邀請大家參加新浪APP，就是新浪免費送大家的一個空間，支援PHP+MySql，免費二級域名，免費域名綁定 這個是我邀請的位址，您通過這個連結注冊即為我的好友，并獲贈雲豆500個，價值5元哦！短網址是http://t.cn/SXOiLh我建立的小站每天訪客已經達到2000+了，每天挂廣告賺50+元哦，呵呵，飯錢不愁了，\(^o^)/