JavaScript Image對象實現(xiàn)原理實例解析
更新時間：2020年08月26日 10:22:36 作者：天馬3798
這篇文章主要介紹了JavaScript Image對象實現(xiàn)原理實例解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
一、JavaScript Image對象 整理
Image 對象
Image 對象代表嵌入的圖像。
<img> 標簽每出現(xiàn)一次，一個 Image 對象就會被創(chuàng)建。
Image 對象屬性
W3C: W3C 標準。
| 屬性 | 描述 | W3C |
|---|---|---|
| align | 設(shè)置或返回與內(nèi)聯(lián)內(nèi)容的對齊方式。 | Yes |
| alt | 設(shè)置或返回無法顯示圖像時的替代文本。 | Yes |
| border | 設(shè)置或返回圖像周圍的邊框。 | Yes |
| complete | 返回瀏覽器是否已完成對圖像的加載。 | No |
| height | 設(shè)置或返回圖像的高度。 | Yes |
| hspace | 設(shè)置或返回圖像左側(cè)和右側(cè)的空白。 | Yes |
| longDesc | 設(shè)置或返回指向包含圖像描述的文檔的 URL。 | Yes |
| lowsrc | 設(shè)置或返回指向圖像的低分辨率版本的 URL。 | No |
| name | 設(shè)置或返回圖像的名稱。 | Yes |
| src | 設(shè)置或返回圖像的 URL。 | Yes |
| useMap | 設(shè)置或返回客戶端圖像映射的 usemap 屬性的值。 | Yes |
| vspace | 設(shè)置或返回圖像的頂部和底部的空白。 | Yes |
| width | 設(shè)置或返回圖像的寬度。 | Yes |
Image 對象事件
| 事件 | 描述 | W3C |
|---|---|---|
| onabort | 當用戶放棄圖像的裝載時調(diào)用的事件句柄。 | Yes |
| onerror | 在裝載圖像的過程中發(fā)生錯誤時調(diào)用的事件句柄。 | Yes |
| onload | 當圖像裝載完畢時調(diào)用的事件句柄。 |
二、常用使用方法
var img = new Image();
img.onload = function () {
console.info('加載成功');
}
//先綁定事件，然后指定地址
img.src = '../img/images/2.jpg';
document.body.appendChild(img);
console.info(img);
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細介紹了js微信分享接口調(diào)用的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-07-07
javascript 新聞切換技術(shù)...2007-12-12
下面的這段js獲取視頻時長代碼是網(wǎng)上找的，還沒有測試,需要的朋友可以參考下2014-04-04
利用JavaScript實現(xiàn)繪制2023新年煙花的示例代碼
大家過年好！新春佳節(jié)，在這個充滿喜悅的日子里，愿新年的鐘聲帶給你一份希望和期待。在這喜慶的日子里，小編和大家分享一個煙花代碼，希望大家能夠喜歡2023-01-01
這篇文章主要介紹了小程序支持SVG，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04
這篇文章主要給大家介紹了關(guān)于uniapp頁面回到頂部兩種實現(xiàn)方法的相關(guān)資料,在uniapp中要實現(xiàn)回到頂部的效果有兩種方法實現(xiàn),文中給出了詳細的代碼示例,需要的朋友可以參考下2023-08-08
這篇文章主要介紹了JavaScript 中的 this 工作原理,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-06-06
下面小編就為大家?guī)硪黄獪\談js中function的參數(shù)默認值。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-02-02
通過action傳過來的值在option獲取進行驗證，下面有個不錯的示例，需要的朋友不要錯過2013-11-11
這篇文章主要介紹了bootstrap組件之按鈕式下拉菜單，包括單按鈕下拉菜單，分裂式下拉菜單和向上彈出式菜單，本文給大家介紹的非常詳細，需要的朋友參考下吧2017-01-01