js 中的new Image

建立一個Image對象：var a=new Image();    定義Image對象的src: a.src=」xxx.gif」;    這樣作就至關於給瀏覽器緩存了一張圖片。

 

圖像對象：

創建圖像對象：圖像對象名稱=new Image([寬度],[高度])

圖像對象的屬性： border complete height hspace lowsrc name src vspace width

圖像對象的事件：onabort onerror onkeydown onkeypress onkeyup onload

須要注意的是：src 屬性必定要寫到 onload 的後面，不然程序在 IE 中會出錯。

參考代碼：

var img=new Image();  
    img.onload=function(){alert("img is loaded")};  
    img.onerror=function(){alert("error!")};  
    img.src="http://www.anet.com/img.gif";  
    function show(){alert("body is loaded");};  
    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 下

會影響網頁的下載速度。固然若是你在 window.onload 以後，執行預加載函數，就不會有 FF 中的問題了。

      能夠經過Image對象的complete 屬性來檢測圖像是否加載完成（每一個Image對象都有一個complete屬性，當圖像處於

裝載過程當中時，該屬性值false,當發生了onload、onerror、onabort中任何一個事件後，則表示圖像裝載過程結束（無論成

沒成功），此時complete屬性爲true）

var img = new Image();  
img.src = oImg[0].src = this.src.replace(/small/,"big");  
oDiv.style.display = "block";  
img.complete ? oDiv.style.display = "none" : (oImg[0].onload = function() {oDiv.style.display = "none"})  

注：

ie 火狐等大衆瀏覽器均支持 Image對象的onload事件。

ie8及如下、opera 不支持onerror事件