javascript Image对象

在做一些tips效果，或者是一些图片浏览效果时，图片开始是隐藏的，当用户进行一定的操作时，图片会根据需要显示出来。但图片文件都相对比较大，如果一下子都显示出来，很耗时间和流量，如果都不显示，等触发一定事件时再加载，用户体验又不太好，增加用户的等待时间。
     权 衡一下利弊，可以有选择的利用JavaScript预加载一些需要的图片，先将其装入DOM，等到需要的时候，直接调用，省掉等待的时间，直接显示出来。 JavaScript里的Image对象可以很好的实现这一需求，在FF下通过alert(img对象)可以看到“object HTMLImageElement“内容，Image对象可以直接利用append添加到body里面去，调用十分方便。

图像对象： 
网页中的图像均会被自动看作图像对象，并依顺序，分别表示为document.images[0]，document.images[1]...

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 之后触发。

根据上面的问题，考虑到浏览器的兼容性和网页的加载时间，尽量不要在 Image 对象里放置过多的图片，否则在 FF 下会影响网页的下载速度。当然如果你在 window.onload 之后，执行预加载函数，就不会有 FF 中的问题了。

可以通过Image对象的complete 属性来检测图像是否加载完成  完成返回true

                        var img = new Image();
			img.src = oImg[0].src = this.src.replace(/small/,"big");
			oDiv.style.display = "block";
			img.complete ? oDiv.style.display = "none" : (oImg[0].onload = function() {oDiv.style.display = "none"})