var img = new Image()

1.Image 对象
Image 对象代表嵌入的图像。
<img> 标签每出现一次，一个 Image 对象就会被创建。
同理 , 创建一个Image对象，就会生成一个<img>标签

<body><script>var img = new Image();img.src = './img/sky.png';var body = document.querySelector('body');body.appendChild(img);</script>
</body>
在浏览器打开,可以看到有图片显示：

2.Image对象de属性

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

3.Image 对象的事件句柄

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

4.

<body><script>var img = new Image();img.onload = function() {alert("img is loaded")};img.onerror = function() {alert("error!")};img.src = './img/sky.png';function show() {alert("body is loaded");alert('img.complete = ' + img.complete);var body = document.querySelector('body');body.appendChild(img);};window.onload = show;</script>
</body>以上代码在safari浏览器,FF浏览器中的弹出顺序为：
alert("img is loaded")
alert("body is loaded");
alert('img.complete = *true*');
然后图片显示。
这是因为：在上述浏览器中,img 对象的加载包含在 body 的加载过程中，
也就是说 img加载完之后，body 才算是加载完毕，触发 window.onload 事件。
因此, 考虑到浏览器的兼容性和网页的加载时间，尽量不要在 Image 对象里放置过多的图片，
否则在 FF和 safari 下会影响网页的下载速度。
当然如果在 window.onload 之后，执行预加载函数，就不会有 FF 和 safari 中的问题了。在 IE 中，img 对象的加载是不包含在 body 的加载过程之中的，body 加载完毕，
window.onload 事件触发时，img 对象可能还未加载结束，img.onload事件会
在 window.onload 之后触发。可以通过Image对象的complete 属性来检测图像是否加载完成
（每个Image对象都有一个complete属性，当图像处于
装载过程中时，该属性值false,当发生了onload、onerror、onabort中
任何一个事件后，则表示图像装载过程结束（不管成
没成功），此时complete属性为true）注：
ie 火狐等大众浏览器均支持 Image对象的onload事件。
ie8及以下、opera 不支持onerror事件
**需要注意的是：src 属性一定要写到 onload 的后面，否则程序在 IE 中会出错。**

var img = new Image()相关推荐

Jittor 的Op, Var算子
Jittor 的Op, Var算子要使用jittor训练模型,需要了解两个主要概念: • Var:Jittor的基本数据类型 • Operations:Jittor的算子与numpy类似首先,开始 ...
微信小程序var,let,const的区别
var 用var的方式声明的变量,为全局变量 let 声明块级变量,即局部变量 const 用于声明常量,也具有块级作用域 const PI=3.14;
Kotlin中var和val的区别
var是一个可变变量,这是一个可以通过重新分配来更改为另一个值的变量.这种声明变量的方式和java中声明变量的方式一样. val是一个只读变量,这种声明变量的方式相当于java中的final变量.一个 ...
js中定义变量之②var let const的区别
var 上一篇文章有讲过,是js定义变量的关键词. 但是在es6中,新添加了两个关键词,用于变量声明的关键词:let 和const 接下来就说一下var let 和const的区别: 首先说var 用 ...
PyTorch 笔记（07）— Tensor 的归并运算（torch.mean、sum、median、mode、norm、dist、std、var、cumsum、cumprod）
1. Tensor 归并运算函数此类操作会使输出形状小于输入形状,并可以沿着某一维度进行指定操作,如加法, 既可以计算整个 tensor 的和,也可以计算 tensor 每一行或者每一列的和, 常 ...
docker load 出错 open /var/lib/docker/tmp/docker-import-837327978/bin/json: no such file or directory
1. 问题现象使用 docker load 加载镜像包的时候出现如下错误: open /var/lib/docker/tmp/docker-import-837327978/bin/json: no ...
了解CSS/CSS3原生变量var (转)
一.变量是个好东西在任何语言中,变量的有一点作用都是一样的,那就是可以降低维护成本,附带还有更高性能,文件更高压缩率的好处. 随着CSS预编译工具Sass/Less/Stylus的关注和逐渐流行,C ...
PHP设置禁止目录索引,/var/www/html目录索引禁止
我正在使用以下文件复制在 /etc/nginx/conf.d/default.conf server { listen 80; root /var/www/html/public; index ind ...
这就是我为什么推荐使用var aa = for (var i = 0, l = aa.length； i ＜ l； i++) {var a = aa[i]；}循环的原因，每秒最快可以执行4000+次！
//很长一段时间我都只使用以下方式做数组循环,具体原因看数据 var aa = for (var i = 0, l = aa.length; i < l; i++) { var a = aa[i ...
linux进程间通信：FIFO应用 /var/log/ 系统日志的模拟实现
在类unix操作系统下存在这样一个目录/var/log/,主要是记录操作系统相关的系统各个进程服务的日志信息该日志系统的特性如下: 支持多进程并发写入同一文件不同进程日志信息可以写入不同文件支持 ...

var img = new Image()

var img = new Image()相关推荐

最新文章

热门文章