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.abaonet.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"})


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM