JavaScript Image对象

最新推荐文章于 2025-06-08 09:01:41 发布

js-coder

最新推荐文章于 2025-06-08 09:01:41 发布

阅读量1.9k

点赞数

分类专栏：【JavaScript】

【JavaScript】专栏收录该内容

21 篇文章

订阅专栏

本文详细介绍了JavaScript中的Image对象的使用方法，包括如何创建、访问其属性和事件，以及如何利用它进行图像预加载。同时，通过对比不同浏览器的表现，展示了Image对象在实际开发中的应用场景和注意事项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在I’m Donkey看到倔倔死磕Javascript之放大镜写的不错，思路很清晰。另外的收获是发现了js的Image对象，他是这么用的：

function getImageSize(imageEl) {
		var i = new Image();
		i.src = imageEl.src;
		return new Array(i.width, i.height);
}

他利用这个函数取得imageEl的width和height。真的很新奇，以前居然不知道js还有Image对象，前几天曾见过ECMAScript 5 在Gecko 1.9.1添加的native JSON对象看来真是生有涯，而学无涯啊。
Image对象在JavaScript 1.1 (i.e. since Netscape Navigator 3.0)引入，我们通过浏览器看到的图像都是通过一个数组显示出来的，这个数组成为 images,他是document对象的一个属性。网页中的图像均会被自动看作图像对象，并依顺序，分别表示为
document.images[0]，document.images[1]… 另外我们可通过给图像一个name属性来访问，如：

<img src="img.gif" name="myImage" width=100 height=100>

这样我们就可以通过document.myImage 或者document.image["myImage]来访这个对象。
image对象现在一般常用来预加载一些图片，先将其装入 DOM，等到需要的时候，直接调用，省掉等待的时间，直接显示出来。JavaScript 里的 Image 对象可以很好的实现这一需求，在 FF 下通过 alert(img对象) 可以看到“object HTMLImageElement“内容，Image 对象可以直接利用 append 添加到 body 里面去，调用十分方便。

图像对象：

建立图像对象：

格式：图像对象名称=new Image([宽度],[高度])

图像对象的属性：

border complete height hspace lowsrc name src vspace width

图像对象的事件：

onabort onerror onkeydown onkeypress onkeyup onload

需要注意的是：src 属性一定要写到 onload 的后面，否则程序在 IE 中会出错。

参考代码：

var img=new Image();
img.οnlοad=function(){alert("img is loaded")};
img.οnerrοr=function(){alert("error!")};
img.src="http://www.abaonet.com/img.gif";
function show(){alert("body is loaded");};
window.οnlοad=show;

运行上面的代码后，在不同的浏览器中进行测试，发现 IE 和 FF 是有区别的，在 FF 中，img 对象的加载包含在 body 的加载过程中，既是 img 加载完之后，body 才算是加载完毕，触发 window.onload 事件。

在 IE 中，img 对象的加载是不包含在 body 的加载过程之中的，body 加载完毕，window.onload 事件触发时，img 对象可能还未加载结束，img.onload 事件会在 window.onload 之后触发。

例子见 javascript dom中的Image对象——图像预加载

其他参考文章

1/ VOODOO’S INTRODUCTION TO JAVASCRIPT
2/ Image Object