當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

图片预加载的问题-----有针对加载和缓存的兼容解决

發布時間：2025/3/13 编程问答 44 豆豆

生活随笔收集整理的這篇文章主要介紹了图片预加载的问题-----有针对加载和缓存的兼容解决小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

網站開發時經常需要在某個頁面需要實現對大量圖片的瀏覽，如果考慮流量的話，大可以像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對象?
};?
};?

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

復制代碼代碼如下:
<!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">?
?
</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.οnlοad=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');//這里寫自己的動作吧，?
}?
}?

轉載于:https://www.cnblogs.com/alanaZ/p/4648581.html

總結

以上是生活随笔為你收集整理的图片预加载的问题-----有针对加载和缓存的兼容解决的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：没有密码直接进入mysql
下一篇：【转载】OmniGraffle （四）化