圖片預加載的問題-----有針對加載和緩存的兼容解決

時間 2019-11-16

標籤圖片加載問題針對緩存兼容解決简体版

原文原文鏈接

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

知道了一張圖片的地址，須要把它在一個固定大小的html容器（能夠是div等）裏邊顯示出來，最重要的固然是須要知道這張即將顯示的圖片的寬和高，而後再結合容器的寬和高，按照必定的縮放比例使圖片顯示出來。所以，實現圖片預加載就成爲圖片瀏覽器的核心功能了。

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

複製代碼代碼以下:

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

經過調用preLoadImg函數，傳入圖片的url，就能使圖片預先下載下來了。實際上，這裏用到的預下載功能也和這基本一致。圖片預下載下來後，經過 img的width和height屬性，就能知道圖片的寬和高了。可是須要考慮到，在作圖片瀏覽器功能時，圖片都是實時顯示的。好比你點了顯示的按鈕，這個時候纔會調用上邊相似的代碼來加載圖片。所以，若是你直接用img.width的時候，圖片尚未徹底下載下來。所以，須要用一些異步的方法，等到圖片下載完畢的時候纔會再對img的width和height進行調用。

實現這樣的異步方法實際上不難，圖片的下載完畢事件也很簡單，就是簡單的onload事件。所以，咱們能夠寫出下面的代碼： css

複製代碼代碼以下:

 
function loadImage(url, callback) {  
 
var img = new Image();  
 
img.src = url;  
 
img.onload = function(){ //圖片下載完畢時異步調用callback函數。  
 
callback.call(img); // 將callback函數this指針切換爲img。  
 
};  
 
}

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

複製代碼代碼以下:

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

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

不過，作到這一步，先別高興太早——還須要考慮一下瀏覽器的兼容性，因而，趕忙到ie裏邊測試一下。沒錯，一樣彈出了圖片的寬度。可是，再點擊load的時候，狀況就不同了，什麼反應都沒有了。刷新一下，也一樣如此。

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

怎麼辦呢？最好的狀況是Image能夠有一個狀態值代表它是否已經載入成功了。從緩存加載的時候，由於不須要等待，這個狀態值就直接是代表已經下載了，而從http請求加載時，由於須要等待下載，這個值顯示爲未完成。這樣的話，就能夠搞定了。

通過一些分析，終於發現一個爲各個瀏覽器所兼容的Image的屬性——complete。因此，在圖片onload事件以前先對這個值作一下判斷便可。最後，代碼變成以下的樣子： java

複製代碼代碼以下:

 
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對象  
 
};  
 
};

通過這麼一番折騰，總算是讓各個瀏覽器都能知足咱們的目標了。雖然代碼很簡單，可是卻把圖片瀏覽器中最核心的問題解決掉了，接下來你所要作的，僅僅是圖片如何呈現的問題了接下來看看另一種方法：web

複製代碼代碼以下:

 <!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');//這裏寫本身的動做吧，  }  }  

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。