欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JS實(shí)現(xiàn)圖片預(yù)加載無(wú)需等待

 更新時(shí)間：2012年12月21日 14:55:07   作者：  
網(wǎng)站開發(fā)時(shí)經(jīng)常需要在某個(gè)頁(yè)面需要實(shí)現(xiàn)對(duì)大量圖片的瀏覽;用javascript來(lái)實(shí)現(xiàn)一個(gè)圖片瀏覽器，讓用戶無(wú)需等待過(guò)長(zhǎng)的時(shí)間就能看到其他圖片

網(wǎng)站開發(fā)時(shí)經(jīng)常需要在某個(gè)頁(yè)面需要實(shí)現(xiàn)對(duì)大量圖片的瀏覽，如果考慮流量的話，大可以像pconline一樣每個(gè)頁(yè)面只顯示一張圖片，讓用戶每看一張圖片就需要重新下載一下整個(gè)頁(yè)面。不過(guò)，在web2.0時(shí)代，更多人愿意用javascript來(lái)實(shí)現(xiàn)一個(gè)圖片瀏覽器，讓用戶無(wú)需等待過(guò)長(zhǎng)的時(shí)間就能看到其他圖片。

知道了一張圖片的地址，需要把它在一個(gè)固定大小的html容器（可以是div等）里邊顯示出來(lái)，最重要的當(dāng)然是需要知道這張即將顯示的圖片的寬和高，然后再結(jié)合容器的寬和高，按照一定的縮放比例使圖片顯示出來(lái)。因此，實(shí)現(xiàn)圖片預(yù)加載就成為圖片瀏覽器的核心功能了。

做過(guò)圖片翻轉(zhuǎn)效果的朋友其實(shí)都知道，要讓圖片輪換的時(shí)候不出現(xiàn)等待，最好是先讓圖片下載到本地，讓瀏覽器緩存起來(lái)。這時(shí)，一般都會(huì)用到j(luò)s里邊的Image對(duì)象。一般的手段無(wú)非這樣：

復(fù)制代碼 代碼如下:

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

通過(guò)調(diào)用preLoadImg函數(shù)，傳入圖片的url，就能使圖片預(yù)先下載下來(lái)了。實(shí)際上，這里用到的預(yù)下載功能也和這基本一致。圖片預(yù)下載下來(lái)后，通過(guò) img的width和height屬性，就能知道圖片的寬和高了。但是需要考慮到，在做圖片瀏覽器功能時(shí)，圖片都是實(shí)時(shí)顯示的。比如你點(diǎn)了顯示的按鈕，這個(gè)時(shí)候才會(huì)調(diào)用上邊類似的代碼來(lái)加載圖片。因此，如果你直接用img.width的時(shí)候，圖片還沒(méi)有完全下載下來(lái)。因此，需要用一些異步的方法，等到圖片下載完畢的時(shí)候才會(huì)再對(duì)img的width和height進(jìn)行調(diào)用。

實(shí)現(xiàn)這樣的異步方法實(shí)際上不難，圖片的下載完畢事件也很簡(jiǎn)單，就是簡(jiǎn)單的onload事件。因此，我們可以寫出下面的代碼：
復(fù)制代碼 代碼如下:

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

好了，再來(lái)寫一個(gè)測(cè)試用例。
復(fù)制代碼 代碼如下:

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

在firefox中測(cè)試一下，發(fā)現(xiàn)不錯(cuò)，果然和預(yù)想的效果一樣，在圖片下載后，就會(huì)彈出圖片的寬度來(lái)。無(wú)論點(diǎn)擊多少次或者刷新結(jié)果都一樣。

不過(guò)，做到這一步，先別高興太早——還需要考慮一下瀏覽器的兼容性，于是，趕緊到ie里邊測(cè)試一下。沒(méi)錯(cuò)，同樣彈出了圖片的寬度。但是，再點(diǎn)擊load的時(shí)候，情況就不一樣了，什么反應(yīng)都沒(méi)有了。刷新一下，也同樣如此。

經(jīng)過(guò)對(duì)多個(gè)瀏覽器版本的測(cè)試，發(fā)現(xiàn)ie6、opera都會(huì)這樣，而firefox和safari則表現(xiàn)正常。其實(shí)，原因也挺簡(jiǎn)單的，就是因?yàn)闉g覽器的緩存了。當(dāng)圖片加載過(guò)一次以后，如果再有對(duì)該圖片的請(qǐng)求時(shí)，由于瀏覽器已經(jīng)緩存住這張圖片了，不會(huì)再發(fā)起一次新的請(qǐng)求，而是直接從緩存中加載過(guò)來(lái)。對(duì)于 firefox和safari，它們視圖使這兩種加載方式對(duì)用戶透明，同樣會(huì)引起圖片的onload事件，而ie和opera則忽略了這種同一性，不會(huì)引起圖片的onload事件，因此上邊的代碼在它們里邊不能得以實(shí)現(xiàn)效果。

怎么辦呢？最好的情況是Image可以有一個(gè)狀態(tài)值表明它是否已經(jīng)載入成功了。從緩存加載的時(shí)候，因?yàn)椴恍枰却?，這個(gè)狀態(tài)值就直接是表明已經(jīng)下載了，而從http請(qǐng)求加載時(shí)，因?yàn)樾枰却螺d，這個(gè)值顯示為未完成。這樣的話，就可以搞定了。

經(jīng)過(guò)一些分析，終于發(fā)現(xiàn)一個(gè)為各個(gè)瀏覽器所兼容的Image的屬性——complete。所以，在圖片onload事件之前先對(duì)這個(gè)值做一下判斷即可。最后，代碼變成如下的樣子：
復(fù)制代碼 代碼如下:

function loadImage(url, callback) {
var img = new Image(); //創(chuàng)建一個(gè)Image對(duì)象，實(shí)現(xiàn)圖片的預(yù)下載
img.src = url;
if (img.complete) { // 如果圖片已經(jīng)存在于瀏覽器緩存，直接調(diào)用回調(diào)函數(shù)
callback.call(img);
return; // 直接返回，不用再處理onload事件
}
img.onload = function () { //圖片下載完畢時(shí)異步調(diào)用callback函數(shù)。
callback.call(img);//將回調(diào)函數(shù)的this替換為Image對(duì)象
};
};

經(jīng)過(guò)這么一番折騰，總算是讓各個(gè)瀏覽器都能滿足我們的目標(biāo)了。雖然代碼很簡(jiǎn)單，但是卻把圖片瀏覽器中最核心的問(wèn)題解決掉了，接下來(lái)你所要做的，僅僅是圖片如何呈現(xiàn)的問(wèn)題了接下來(lái)看看另外一種方法：
復(fù)制代碼 代碼如下:

<!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 實(shí)現(xiàn)圖片預(yù)加載 加載完后執(zhí)行動(dòng)作</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');//這里寫自己的動(dòng)作吧，
}
}

相關(guān)文章

最新評(píng)論