JavaScript Image對(duì)象實(shí)現(xiàn)原理實(shí)例解析
更新時(shí)間：2020年08月26日 10:22:36 作者：天馬3798
這篇文章主要介紹了JavaScript Image對(duì)象實(shí)現(xiàn)原理實(shí)例解析,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
一、JavaScript Image對(duì)象 整理
Image 對(duì)象
Image 對(duì)象代表嵌入的圖像。
<img> 標(biāo)簽每出現(xiàn)一次，一個(gè) Image 對(duì)象就會(huì)被創(chuàng)建。
Image 對(duì)象屬性
W3C: W3C 標(biāo)準(zhǔn)。
| 屬性 | 描述 | W3C |
|---|---|---|
| align | 設(shè)置或返回與內(nèi)聯(lián)內(nèi)容的對(duì)齊方式。 | Yes |
| alt | 設(shè)置或返回?zé)o法顯示圖像時(shí)的替代文本。 | Yes |
| border | 設(shè)置或返回圖像周圍的邊框。 | Yes |
| complete | 返回瀏覽器是否已完成對(duì)圖像的加載。 | 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 對(duì)象事件
| 事件 | 描述 | W3C |
|---|---|---|
| onabort | 當(dāng)用戶放棄圖像的裝載時(shí)調(diào)用的事件句柄。 | Yes |
| onerror | 在裝載圖像的過程中發(fā)生錯(cuò)誤時(shí)調(diào)用的事件句柄。 | Yes |
| onload | 當(dāng)圖像裝載完畢時(shí)調(diào)用的事件句柄。 |
二、常用使用方法
var img = new Image();
img.onload = function () {
console.info('加載成功');
}
//先綁定事件，然后指定地址
img.src = '../img/images/2.jpg';
document.body.appendChild(img);
console.info(img);
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- nodejs處理圖片的中間件node-images詳解
- js關(guān)于getImageData跨域問題的解決方法
- jQuery插件ImageDrawer.js實(shí)現(xiàn)動(dòng)態(tài)繪制圖片動(dòng)畫（附源碼下載）
- javascript實(shí)現(xiàn)鼠標(biāo)移到Image上方時(shí)顯示文字效果的方法
- javascript從image轉(zhuǎn)換為base64位編碼的String
- js的image onload事件使用遇到的問題
- js中Image對(duì)象以及對(duì)其預(yù)加載處理示例
- 通過js獲取div的background-image屬性
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了js微信分享接口調(diào)用的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-07-07
javascript 新聞切換技術(shù)...2007-12-12
下面的這段js獲取視頻時(shí)長(zhǎng)代碼是網(wǎng)上找的，還沒有測(cè)試,需要的朋友可以參考下2014-04-04
利用JavaScript實(shí)現(xiàn)繪制2023新年煙花的示例代碼
大家過年好！新春佳節(jié)，在這個(gè)充滿喜悅的日子里，愿新年的鐘聲帶給你一份希望和期待。在這喜慶的日子里，小編和大家分享一個(gè)煙花代碼，希望大家能夠喜歡2023-01-01
這篇文章主要介紹了小程序支持SVG，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
uniapp頁面回到頂部?jī)煞N實(shí)現(xiàn)方法
這篇文章主要給大家介紹了關(guān)于uniapp頁面回到頂部?jī)煞N實(shí)現(xiàn)方法的相關(guān)資料,在uniapp中要實(shí)現(xiàn)回到頂部的效果有兩種方法實(shí)現(xiàn),文中給出了詳細(xì)的代碼示例,需要的朋友可以參考下2023-08-08
這篇文章主要介紹了JavaScript 中的 this 工作原理,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-06-06
下面小編就為大家?guī)硪黄獪\談js中function的參數(shù)默認(rèn)值。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-02-02
通過action傳過來的值在option獲取進(jìn)行驗(yàn)證的方法
通過action傳過來的值在option獲取進(jìn)行驗(yàn)證，下面有個(gè)不錯(cuò)的示例，需要的朋友不要錯(cuò)過2013-11-11
這篇文章主要介紹了bootstrap組件之按鈕式下拉菜單，包括單按鈕下拉菜單，分裂式下拉菜單和向上彈出式菜單，本文給大家介紹的非常詳細(xì)，需要的朋友參考下吧2017-01-01