網站開發時經常需要在某個頁面需要實現對大量圖片的瀏覽,如果考慮流量的話,大可以像pconline一樣每個頁面只顯示一張圖片,讓用戶每看一張圖片就需要重新下載一下整個頁面。不過,在web2.0時代,更多人願意用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事件之前先對這個值做一下判斷即可。最後,html代碼變成如下的樣子:
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對象 }; };
經過這麼一番折騰,總算是讓各個瀏覽器都能滿足我們的目標了。雖然代碼很簡單,但是卻把圖片瀏覽器中最核心的問題解決掉了,接下來你所要做的,僅僅是圖片如何呈現的問題了接下來看看另外一種方法:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>js 實現圖片預載入 載入完後執行動作</title> </head> <style type="text/css"> <!-- *html{ margin:0; padding:0; border:0; } body{border:1px solid #f3f3f3; background:#fefefe} div#loading{ width:950px; height:265px; line-height:265px; overflow:hidden; position:relative; text-align:center; } div#loading p{ position:static; +position:absolute; top:50%; vertical-align:middle; } div#loading p img{ position:static; +position:relative; top:-50%;left:-50%; vertical-align:middle } --> </style> <div id="loading"> <p><img src="http://www.baidu.com/img/baidu_logo.gif" /></p> </div> <script> var i=0; var c=3; var imgarr=new Array imgarr[0]="http://www.baidu.com/img/baidu_logo.gif"; imgarr[1]="http://img.baidu.com/img/logo-img.gif"; imgarr[2]="http://img.baidu.com/img/logo-zhidao.gif"; var Browser=new Object(); Browser.userAgent=window.navigator.userAgent.toLowerCase(); Browser.ie=/msie/.test(Browser.userAgent); Browser.Moz=/gecko/.test(Browser.userAgent); function SImage(url,callback) { var img = new Image(); if(Browser.ie){ img.onreadystatechange =function(){ if(img.readyState=="complete"||img.readyState=="loaded"){ ii=i+1; callback(i); } } }else if(Browser.Moz){ img.onload=function(){ if(img.complete==true){ ii=i+1; callback(i); } } } img.src=url; } function icall(v) { if(v<c){ SImage(""+imgarr[v]+"",icall); } else if(v>=c){ i=0; //location.replace('banner.html');//這裡寫自己的動作吧, } }