JavaScript Image对象实现原理实例解析


Posted in Javascript onAugust 26, 2020

一、JavaScript Image对象 整理

Image 对象

Image 对象代表嵌入的图像。

<img> 标签每出现一次,一个 Image 对象就会被创建。

Image 对象属性

W3C: W3C 标准。

属性 描述 W3C
align 设置或返回与内联内容的对齐方式。 Yes
alt 设置或返回无法显示图像时的替代文本。 Yes
border 设置或返回图像周围的边框。 Yes
complete 返回浏览器是否已完成对图像的加载。 No
height 设置或返回图像的高度。 Yes
hspace 设置或返回图像左侧和右侧的空白。 Yes
longDesc 设置或返回指向包含图像描述的文档的 URL。 Yes
lowsrc 设置或返回指向图像的低分辨率版本的 URL。 No
name 设置或返回图像的名称。 Yes
src 设置或返回图像的 URL。 Yes
useMap 设置或返回客户端图像映射的 usemap 属性的值。 Yes
vspace 设置或返回图像的顶部和底部的空白。 Yes
width 设置或返回图像的宽度。 Yes

Image 对象事件

事件 描述 W3C
onabort 当用户放弃图像的装载时调用的事件句柄。 Yes
onerror 在装载图像的过程中发生错误时调用的事件句柄。 Yes
onload 当图像装载完毕时调用的事件句柄。

二、常用使用方法

var img = new Image();
    img.onload = function () {
      console.info('加载成功');
    }
    //先绑定事件,然后指定地址
    img.src = '../img/images/2.jpg';
    document.body.appendChild(img);
    console.info(img);

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery入门—JQuery程序的代码风格详细介绍
Jan 03 Javascript
jQuery操作input值的各种方法总结
Nov 21 Javascript
如何解决谷歌浏览器下jquery无法获取图片的尺寸
Sep 10 Javascript
jQuery拖动元素并对元素进行重新排序
Dec 30 Javascript
jQuery禁用快捷键例如禁用F5刷新 禁用右键菜单等的简单实现
Aug 31 Javascript
jQuery选择器中的特殊符号处理方法
Sep 08 jQuery
jQuery实现table中两列CheckBox只能选中一个的示例
Sep 22 jQuery
vue props传值失败 输出undefined的解决方法
Sep 11 Javascript
使用vue 国际化i18n 实现多实现语言切换功能
Oct 11 Javascript
layer.open 子页面弹出层向父页面传输数据的例子
Sep 26 Javascript
vue实现修改图片后实时更新
Nov 14 Javascript
JS面向对象编程基础篇(一) 对象和构造函数实例详解
Mar 03 Javascript
js实现飞机大战游戏
Aug 26 #Javascript
JS+Canvas实现五子棋游戏
Aug 26 #Javascript
Js Snowflake(雪花算法)生成随机ID的实现方法
Aug 26 #Javascript
uin-app+mockjs实现本地数据模拟
Aug 26 #Javascript
一篇文章带你搞懂Vue虚拟Dom与diff算法
Aug 25 #Javascript
微信小程序换肤功能实现代码(思路详解)
Aug 25 #Javascript
prettier自动格式化去换行的实现代码
Aug 25 #Javascript
You might like
jQuery EasyUI API 中文文档 - DateBox日期框
2011/10/15 PHP
PHPEXCEL 使用小记
2013/01/06 PHP
浅谈php中变量的数据类型判断函数
2017/03/04 PHP
七种PHP开发环境搭建工具
2020/06/28 PHP
jQuery控制输入框只能输入数值的小例子
2013/03/20 Javascript
javascript闭包的高级使用方法实例
2013/07/04 Javascript
jQuery焦点图切换特效插件封装实例
2013/08/18 Javascript
js调试工具Console命令详解
2014/10/21 Javascript
javascript 回调函数详解
2014/11/11 Javascript
IE6/IE7中JavaScript json提示缺少标识符、字符串或数字问题处理
2014/12/16 Javascript
在ASP.NET MVC项目中使用RequireJS库的用法示例
2016/02/15 Javascript
javascript实现列表切换效果
2016/05/02 Javascript
JavaScript SHA512加密算法详细代码
2016/10/06 Javascript
JavaScript重定向URL参数的两种方法小结
2016/10/19 Javascript
JS中的作用域链
2017/03/01 Javascript
JS实现列表页面隔行变色效果
2017/03/25 Javascript
nodejs利用ajax实现网页无刷新上传图片实例代码
2017/06/06 NodeJs
利用vue组件自定义v-model实现一个Tab组件方法示例
2017/12/06 Javascript
Vue.js 踩坑记之双向绑定
2018/05/03 Javascript
react同构实践之实现自己的同构模板
2019/03/13 Javascript
vue中的.$mount('#app')手动挂载操作
2020/09/02 Javascript
[01:11:02]Secret vs Newbee 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
Python实现的HTTP并发测试完整示例
2020/04/23 Python
django实现同一个ip十分钟内只能注册一次的实例
2017/11/03 Python
Python基于win32ui模块创建弹出式菜单示例
2018/05/09 Python
pandas的qcut()方法详解
2019/07/06 Python
如何通过Django使用本地css/js文件
2020/01/20 Python
基于python SMTP实现自动发送邮件教程解析
2020/06/02 Python
基于keras中的回调函数用法说明
2020/06/17 Python
浅析python实现动态规划背包问题
2020/12/31 Python
致200米运动员广播稿
2014/02/06 职场文书
经典安踏广告词
2014/03/21 职场文书
大学四年个人总结
2015/03/03 职场文书
材料采购员岗位职责
2015/04/03 职场文书
mysql创建存储过程及函数详解
2021/12/04 MySQL
浅谈JavaScript作用域
2021/12/06 Javascript