JavaScript與Image加載事件(onload)、加載狀態(tài)(complete)
這歸于圖片對(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è)例子:
<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片。
稍微修改下:
<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)!)
<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ū)е碌哪兀?
眾所周知,從緩存里加載東西的速度是很快的,那么在
...
Img.src = isrc;
Img.onload = ...
...
的過(guò)程中,難道 IE、Opera 加載的速度快到,來(lái)不及追加事件?
這回加載一張根本不存在的圖片看看效果:
<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)文章
Javascript下拉刷新的簡(jiǎn)單實(shí)現(xiàn)
這篇文章主要為大家詳細(xì)介紹了Javascript下拉刷新的簡(jiǎn)單實(shí)現(xiàn)過(guò)程,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-02-02javascript bom是什么及bom和dom的區(qū)別
BOM是瀏覽器對(duì)象模型,DOM是文檔對(duì)象模型,前者是對(duì)瀏覽器本身進(jìn)行操作,而后者是對(duì)瀏覽器(可看成容器)內(nèi)的內(nèi)容進(jìn)行操作。這篇文章給大家介紹javascript bom是什么及bom和dom的區(qū)別,感興趣的朋友一起學(xué)習(xí)吧2015-11-11前端解決跨域問(wèn)題nmp安裝http-server的問(wèn)題
這篇文章主要介紹了前端解決跨域問(wèn)題-nmp安裝http-server的問(wèn)題,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-07-07bootstrap multiselect 多選功能實(shí)現(xiàn)方法
這篇文章主要介紹了bootstrap multiselect 多選功能實(shí)現(xiàn)方法,需要的朋友可以參考下2017-06-06微信小程序?qū)W習(xí)總結(jié)(二)樣式、屬性、模板操作分析
這篇文章主要介紹了微信小程序樣式、屬性、模板操作,結(jié)合實(shí)例形式分析了微信小程序尺寸單位、樣式、數(shù)據(jù)初始化、屬性、模板調(diào)用相關(guān)操作技巧,需要的朋友可以參考下2020-06-06bootstrapValidator表單驗(yàn)證插件學(xué)習(xí)
這篇文章主要為大家詳細(xì)介紹了表單驗(yàn)證插件bootstrapValidator的使用方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-12-12JavaScript利用append添加元素報(bào)錯(cuò)的解決方法
這篇文章主要介紹了JavaScript利用append添加元素報(bào)錯(cuò)的解決方法,需要的朋友可以參考下2014-07-07js實(shí)現(xiàn)頁(yè)面打印功能實(shí)例代碼(附去頁(yè)眉頁(yè)腳功能代碼)
js實(shí)現(xiàn)頁(yè)面打印功能實(shí)例代碼(附去頁(yè)眉頁(yè)腳功能代碼)2009-12-12