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

JavaScript與Image加載事件(onload)、加載狀態(tài)(complete)

 更新時(shí)間:2011年02月14日 21:54:31   作者:  
以前寫(xiě)過(guò)一個(gè)圖片等比縮放的Js函數(shù),缺陷是要等到所有圖片都加載完畢了,才能進(jìn)行等比縮放。
昨天用jQuery插件aeImageResize,發(fā)現(xiàn)它更有優(yōu)勢(shì):每張圖片加載完后,會(huì)馬上進(jìn)行等比縮放。
這歸于圖片對(duì)象Image的加載事件onload的功勞。
查看插件的源碼,發(fā)現(xiàn)它也依賴(lài)圖片對(duì)象的complete屬性和onload事件,并且特別把IE6區(qū)分對(duì)待,到底IE6在圖片加載對(duì)象上,與其它瀏覽器有什么不同呢?

看下文:

通過(guò)js操縱DOM很多情況下都是為了實(shí)現(xiàn)和當(dāng)前頁(yè)html元素的異步載入,我談?wù)剬?duì)Image對(duì)象的一些認(rèn)識(shí)。
看個(gè)例子:
復(fù)制代碼 代碼如下:

<input type="button" name="" value="載入圖片" onclick="addImg('tt.jpg')" />
<script type="text/javascript">
<!--
function addImg(isrc)
{
var Img = new Image();
Img.src = isrc;
Img.onload = function ()
{
document.body.appendChild(Img);
}
}
//-->
</script>

當(dāng)包含上述代碼的頁(yè)面打開(kāi)時(shí)并不載入“tt.jpg”,當(dāng)點(diǎn)擊按鈕時(shí)候才載入。當(dāng)載入完成后觸發(fā)onload事件顯示到頁(yè)面上。如果你是第一次加載 “tt.jpg" 這張圖片的話(huà),運(yùn)行正常。點(diǎn)擊按鈕加載并顯示一張圖片,如果重復(fù)點(diǎn)擊會(huì)怎么樣呢?
IE、Opera中,除了第一次加載 圖片時(shí)候顯示正常,之后再點(diǎn)擊就沒(méi)有反應(yīng)了,刷新也一樣。難道它們只觸發(fā)一次 “onload”事件?是緩存機(jī)制?
FF、Chrom中,每點(diǎn)擊一次加載一張?jiān)搱D片。
稍微修改下:
復(fù)制代碼 代碼如下:

<input type="button" name="" value="載入圖片" onclick="addImg('tt.jpg')" />
<script type="text/javascript">
<!--
function addImg(isrc)
{
var Img = new Image();
Img.onload = function ()
{
document.body.appendChild(Img);
}
Img.src = isrc;
}
//-->
</script>

運(yùn)行后發(fā)現(xiàn),奇怪的事情發(fā)生了。
所有的瀏覽器都一致了,都是每點(diǎn)擊一次加載一張圖片。這又是什么原因?由此可以見(jiàn) IE、Opera 執(zhí)行過(guò)程中并不是只觸發(fā)一次 onload 事件!
聯(lián)想一下 Image 對(duì)象的一些屬性看看,complete、readyState(IE專(zhuān)屬值[uninitialized,complete]) (為防止緩存影響效果請(qǐng)更換圖片名稱(chēng)!)
復(fù)制代碼 代碼如下:

<input type="button" name="" value="complete" onclick='alert("complete : "+Img.complete +"\nreadyState : "+Img.readyState)' />
<input type="button" name="" value="載入圖片" onclick="addImg('mtm.jpg')" />
<script type="text/javascript">
<!--
var Img;
function addImg(isrc)
{
Img = new Image();
//Img.src = isrc;
Img.onload = function ()
{
alert("complete : "+Img.complete +"\nreadyState : "+Img.readyState)
document.body.appendChild(Img);
}
Img.src = isrc;
}
//-->
</script>

經(jīng)過(guò)以上測(cè)試,可以看出一些不同點(diǎn),對(duì)于 complete 屬性來(lái)講,IE是根據(jù)圖片是否顯示過(guò)來(lái)判斷,就是說(shuō)當(dāng)加載的圖片顯示出來(lái)后,complete 屬性的值才為 true ,否則一直是 false ,和以前是否加載過(guò)該張圖片沒(méi)有關(guān)系,即和緩存沒(méi)有關(guān)系!但是其它瀏覽器表現(xiàn)出來(lái)的確不一樣,只要以前加載過(guò)該圖,瀏覽器有緩存,complete 就為 true ,這和IE的 readyState 屬性的表現(xiàn)一致!
至此,可以肯定的是所有的瀏覽器都會(huì)緩存圖片!可是上面的問(wèn)題到底是什么原因?qū)е碌哪兀?
眾所周知,從緩存里加載東西的速度是很快的,那么在
復(fù)制代碼 代碼如下:

...
Img.src = isrc;
Img.onload = ...
...

的過(guò)程中,難道 IE、Opera 加載的速度快到,來(lái)不及追加事件?
這回加載一張根本不存在的圖片看看效果:
復(fù)制代碼 代碼如下:

<input type="button" name="" value="complete" onclick='alert("complete : "+Imgttmt.complete +"\nreadyState : "+Imgttmt.readyState)' />
<input type="button" name="" value="載入圖片" onclick="addImg('mtmttyt.jpg')" />
<script type="text/javascript">
<!--
var Imgttmt;
function addImg(isrc)
{
Imgttmt = new Image();
Imgttmt.src = isrc;
alert("complete : "+Imgttmt.complete +"\nreadyState : "+Imgttmt.readyState)
Imgttmt.onload = function ()
{
alert("impossible")
}
}
//-->
</script>

可以肯定的是所有瀏覽器都不觸發(fā) onload 事件。
從是否緩存或已經(jīng)加載過(guò)圖片的角度講,IE、Opera表現(xiàn)正常,complete 始終為 false ;IE的 readyState 始終為uninitialized 。
令人疑惑的是FF,其中 Imgttmt.complete 的值一直是 true ;
更令人困惑的是 Chrom,它是在最初 new Imgttmt() 的時(shí)候 Imgttmt.complete 值為 false。而之后 Imgttmt.complete 值就一直為 true 了!
如果換一張從來(lái)沒(méi)有加載過(guò)的圖片,F(xiàn)F和Chrom 的行為就一致了,都是一開(kāi)始加載時(shí), Imgttmt.complete 值為false, 之后為 true!
測(cè)試的過(guò)程中還發(fā)現(xiàn),腳本的執(zhí)行順序的確會(huì)影響到類(lèi)似于 onload 等事件的追加,如果在其顯示后在追加事件就沒(méi)有什么實(shí)際意義了!
基于 javascript 這種解釋性語(yǔ)言的特性,在追加事件的時(shí)候一定要注意把事件追加在觸發(fā)該事件的句柄之前。

相關(guān)文章

最新評(píng)論