js预载入 new Image对象
图像预载入
对于浏览器载入图像来说，只有在对图像发送一个 HTTP请求之后，它们才会被浏览器载入，对图像的 HTTP 请求要么使用 ＜img＞ 标记，要么通过方法调用实现。如果使用 JavaScript 脚本来处理在 mouseover 事件时交换图像，或者在一段时间之后自动更改图像，那么在从服务器获取图像时可能要等上几秒钟到几分钟的时间。如果使用一个慢速的 Internet 连接，或者要获取的图像非常大，或者其它一些情况，这种现象就特别明显；这样，延迟就造成你不能达到自己期望的效果。
一些浏览器采用一些措施来缓解这一问题，比如试图通过在本地缓存中存储图像，从而使随后对图像的调用能够立即被满足；但是在图像第一次被调用时依然会存在一些延迟。预载入是在需要图像之前将其下载到缓存的一种方法。通过这一措施，当真正需要图像时，它就可以被立即从缓存中取出，从而能够立即显示。
图像对象：
建立图像对象：图像对象名称=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.onload=function(){alert("img is loaded")};
img.onerror=function(){alert("error!")};
img.src="http://www.abaonet.com/img.gif";
function show(){alert("body is loaded");};
window.onload=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 属性来检测图像是否加载完成（每个Image对象都有一个complete属性，当图像处于
装载过程中时，该属性值false,当发生了onload、onerror、onabort中任何一个事件后，则表示图像装载过程结束（不管成
没成功），此时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"})
注：
ie 火狐等大众浏览器均支持 Image对象的onload事件。
ie8及以下、opera 不支持onerror事件
使用数组载入多个图像
在实际应用中，我们可能需要预载入多个图像，而不止一个；例如，在一个包含多个图像翻卷的菜单栏中，或者在我们试图创建平滑效果时，都需要预载入多个图像。其实这并不困难，只要使用 JavaScript 的数组即可实现，如下例所示：
<script language="JavaScript">
function preloader() {
// counter
var i = 0;
// create object
imageObj = new Image();
// set image list
images = new Array();
images[0]="image1.jpg"
images[1]="image2.jpg"
images[2]="image3.jpg"
images[3]="image4.jpg"
// start preloading
for(i=0; i<=3; i ) {
imageObj.src=images[i];
}
}
</script>
在上面的例子中，我们定义一个变量 i和一个 Image() 对象 imageObj。然后定义了一个新数组 images[]，每个数组元素存储要被预载入的图像。最后，创建一个 for() 循环来处理整个数组，并将每个元素赋给 Image() 对象，这样将其载入到缓存中。
onLoad() 事件处理器
像很多 JavaScript 的其它对象一样，Image() 对象也有一些事件处理器。其中最有用的一个肯定是 onLoad() 处理器，它在图像完全载入之后调用。这个事件处理器可以与一个自定义函数联系起来，以在图像完全载入之后执行一些特定的任务。下面的例子说明了这一点，在这个例子中，首先在图像载入时显示一个“please wait”屏幕，然后在载入完成时将浏览器转到一个新的 URL。
<html>
<head>
<script language="JavaScript">
// create an image object
objImage = new Image();
// set what happens once the image has loaded objImage.onLoad=imagesLoaded();
// preload the image file
objImage.src='images/image1n.gif';
// function invoked on image load
function imagesLoaded() {
document.location.href='index2.html';
}
</script>
</head>
<body>
Please wait, loading images...
</body>
</html>
当然，你还可以创建一个图像数组然后在其上进行循环操作，预载入每个图像，然后在每一阶段跟踪被载入图像的数目。一旦所有图像载入完毕，根据事件处理器的程序逻辑，它就可以将浏览器带入下一个页面（或者执行其它任务）。
