网站开发中，某些页面效果（如：图片翻转）需要图片能够立即显示；也有些页面图片比较多，下载时间比较长，需要在图片未下载完成前显示其他图片（表示图片正在下载），下载完成后才把图片显示出来。
要实现这些效果，一般都会用到JavaScript里边的Image对象。
- Image对象的主要属性
-
- src
- 图片地址。
- complete
- 表示Image是否被浏览器缓存或已经载入到当前页面。
该属性在IE浏览器中有点不同，IE浏览器中complete属性是在onload事件之后才改变，而Firefox、Opera等浏览器则在onload之前就已经改变。即如下代码，在图片能够正常下载并且图片未被浏览器缓存的情况下，IE与Firefox、Opera等浏览器所执行的结果是不同的。var testImage=new Image(); testImage.src="http://www.olnote.com/images/logo.gif"; testImage.onload=function(){ alert(testImage.complete);//在满足上文提到的条件下，IE显示“false”，而Firefox、Opera等浏览器显示“true”。 };
- Image对象的主要事件
-
- onload
- 图片下载完成后触发。
关于该事件，IE与Firefox、Opera等浏览器也是有区别的。如果图片已经被浏览器缓存起来或已经下载到当前页面，则IE不会触发该事件。
以下是先载入一张图片，再次载入同一张图片的示例。（注：这里不要把图片设置为浏览器缓存）
- onerror
- 图片下载失败的时候触发。
- JavaaScript图片加载示例（浏览器兼容）
- 来源：http://www.olnote.com/itlife/note/100000069.aspx