JS實現圖片預加載無需等待

時間 2019-11-16

原文原文鏈接

網站開發時常常須要在某個頁面須要實現對大量圖片的瀏覽;用javascript來實現一個圖片瀏覽器，讓用戶無需等待過長的時間就能看到其餘圖片javascript

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

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

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

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

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

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

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

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

 
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事件以前先對這個值作一下判斷便可。最後，代碼變成以下的樣子： web

 
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"> 
 <img src="http://www.baidu.com/img/baidu_logo.gif" />  
</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');//這裏寫本身的動做吧， 
} 
}

相關標籤/搜索

每日一句

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