快捷導(dǎo)航

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);

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

原生js生成圖片驗(yàn)證碼
這篇文章主要為大家詳細(xì)介紹了原生js生成圖片驗(yàn)證碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-10-10
javascript表單驗(yàn)證大全
JavaScript是用來在數(shù)據(jù)被傳輸?shù)椒?wù)前對(duì)html表單中輸入的數(shù)據(jù)進(jìn)行驗(yàn)證，使用javascript對(duì)用戶輸入的信息進(jìn)行驗(yàn)證是項(xiàng)目必須的，下面小編給大家整理一些比較常用的javascript表單驗(yàn)證，需要的朋友可以參考下
2015-08-08
Three.js+React使二維圖片呈現(xiàn)3D效果
這篇文章主要為大家介紹了如何利用Three.js+React技術(shù)棧，將二維漫畫圖片轉(zhuǎn)化為三維視覺效果。文中的實(shí)現(xiàn)方法講解詳細(xì)，需要的可以參考一下
2022-02-02
js實(shí)現(xiàn)點(diǎn)擊上傳圖片并設(shè)為模糊背景
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)點(diǎn)擊上傳圖片并設(shè)為模糊背景，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-08-08
webpack開發(fā)環(huán)境和生產(chǎn)環(huán)境的深入理解
這篇文章主要介紹了webpack開發(fā)環(huán)境和生產(chǎn)環(huán)境的深入理解，詳細(xì)的介紹了什么是開發(fā)環(huán)境和生產(chǎn)環(huán)境并配置，非常具有實(shí)用價(jià)值，需要的朋友可以參考下
2018-11-11
原生JS實(shí)現(xiàn)點(diǎn)擊數(shù)字小游戲
這篇文章主要為大家詳細(xì)介紹了原生JS實(shí)現(xiàn)點(diǎn)擊數(shù)字小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-04-04
js操作DOM--添加、刪除節(jié)點(diǎn)的簡單實(shí)例
下面小編就為大家?guī)硪黄猨s操作DOM--添加、刪除節(jié)點(diǎn)的簡單實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-07-07
基于javascript實(shí)現(xiàn)文字無縫滾動(dòng)效果
這篇文章主要介紹了基于javascript實(shí)現(xiàn)文字無縫滾動(dòng)效果的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-03-03
100個(gè)不能錯(cuò)過的實(shí)用JS自定義函數(shù)
本文收集了100個(gè)原生態(tài)JavaScript編寫的常用、實(shí)用自定義函數(shù),需要的朋友可以參考下
2014-03-03
javascript表單事件處理方法詳解
這篇文章主要為大家詳細(xì)介紹了javascript表單事件處理方法，感興趣的小伙伴們可以參考一下
2016-05-05