js Image 物件onload和預載入

2021-06-29 06:52:04 字數 1742 閱讀 5885

建立乙個image物件:var a=new image();定義image物件的src:a.src=」***.gif」;    這樣做就相當於給瀏覽器快取了一張。

影象物件:

建立影象物件:

影象物件名稱=new image([寬度],[高度])

影象物件的屬性:

border complete height hspace lowsrc name src vspace width

影象物件的事件:

onabort onerror onkeydown onkeypress onkeyup onload

需要注意的是:src 屬性一定要寫到 onload 的後面,否則程式在 ie 中會出錯。

參考**:

[html]view plain

copy

var 

img=

newimage();  

img.onload

=function

();  

img.onerror

=function

();  

img.src

="";  function show();  

window.onload

=show

;  

執行上面的**後,在不同的瀏覽器中進行測試,發現 ie 和 ff 是有區別的,在 ff 中,img 物件的載入包含在 body 

的載入過程中,既是 img載入完之後,body 才算是載入完畢,觸發 window.onload 事件。

在 ie 中,img 物件的載入是不包含在 body 的載入過程之中的,body 載入完畢,window.onload 事件觸發時,img

物件可能還未載入結束,img.onload事件會在 window.onload 之後觸發。

根據上面的問題,考慮到瀏覽器的相容性和網頁的載入時間,盡量不要在 image 物件裡放置過多的,否則在 ff 下

可以通過image物件的complete 屬性來檢測影象是否載入完成

(每個image物件都有乙個complete屬性,當影象處於

裝載過程中時,該屬性值false,當發生了

onload、onerror、onabort中任何乙個事件後,則表示影象裝載過程結束(不管成

沒成功),此時complete屬性為true)

[html]view plain

copy

var 

img= 

newimage();    

img.src

= oimg

[0].src

= this

.src.replace(/small/,"big");    

odiv.style.display

= "block"

;    

img.complete ? odiv.style.display

= "none"

: (oimg[0]

.onload

= function

() )     注:

ie 火狐等大眾瀏覽器均支援 image物件的onload事件。

ie8及以下、opera 不支援onerror事件

offsetHeight在OnLoad中為0的現象

在使用ie中,特別在目前div css的方式,往往不定義div的高度,這是在新增div內容後,需要獲取div的高度時,往往需要用到offsetheight。在使用中,有時會碰到offsetheight獲取到為0的現象,但如果你用各種js除錯工具除錯,又能在物件中看到值 如果直接指向offsethei...

window常見事件onload

頁面 視窗 載入事件 2種 第1種 window.onload 是視窗 頁面 載入事件,當文件內容完全載入完成會觸發該事件 包括影象 指令碼檔案 css 檔案等 就呼叫的處理函式。第2種 domcontentloaded 事件觸發時,僅當dom載入完成,不包括樣式表,flash等等。ie9以上才支援...

onload什麼時候執行

在js中,如果希望在頁面載入完成後執行某些操作的話,一般的寫法如下 window.onload function function 等同於寫法 document ready 和 ready 在 document ready 執行時,整個dom文件樹已經解析完成,即各個dom元素都已經可以訪問了 但是...