网站开发中，某些页面效果（如：图片翻转）需要图片能够立即显示；也有些页面图片比较多，下载时间比较长，需要在图片未下载完成前显示其他图片（表示图片正在下载），下载完成后才把图片显示出来。
要实现这些效果，一般都会用到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不会触发该事件。
以下是先载入一张图片，再次载入同一张图片的示例。（注：这里不要把图片设置为浏览器缓存）
var url="http://www.olnote.com/images/logo.gif"; var loadImage=new Image(); loadImage.src=url; loadImage.onload=function(){ alert("onload事件被触发"); var againLoadImage=new Image(); againLoadImage.src=url; againLoadImage.onload=function(){//由于图片已经载入到当前页面，在IE中，onload事件不会再被触发。 alert("onload事件再次被触发"); } } - onerror
- 图片下载失败的时候触发。
- JavaaScript图片加载示例（浏览器兼容）
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>JavaScript 图片加载</title> <script type="text/javascript"> //url：图片地址。imageEvent：图片处理事件，imageEvent.onload图片载入完成触发，imageEvent.onerror图片载入失败触发。 function loadImage(url,imageEvent){ var img = new Image();//创建一个Image对象，实现图片的加载。 if(imageEvent.onerror!=null){ img.onerror=function(){//图片下载异常时异步调用imageEvent.onerror函数。 imageEvent.onerror.call(img);//将imageEvent.onerror函数的this替换为Image对象。 }; } img.src = url; if (imageEvent.onload!=null){ if(img.complete){//如果图片已经存在于浏览器缓存或者已经加载到当前页面。 imageEvent.onload.call(img);//将imageEvent.onload函数的this替换为Image对象。 return;//直接返回，不用再处理onload或者onerror事件。 } else{ img.onload=function(){//图片下载完毕时异步调用imageEvent.onload函数。 imageEvent.onload.call(img);//将imageEvent.onload函数的this替换为Image对象。 }; } } } </script> </head> <body> <input type="text" id="imageUrl" value="http://www.olnote.com/images/logo.gif" style=" 350px;" /> <input value="加载图片" type="button" onclick="loadImageTest()" /> <div id="imageBox"> </div> <script type="text/javascript"> function loadImageTest(){ var imageBox=document.getElementById("imageBox"); var imageUrl=document.getElementById("imageUrl"); var maxWidth=imageBox.scrollWidth; imageBox.innerHTML="图片加载中。。。"; var imageEvent={ onerror:function(){ imageBox.innerHTML="图片加载失败。"; }, onload:function(){ imageBox.innerHTML=""; if(this.width>maxWidth) { this.width=maxWidth; } imageBox.appendChild(this); } }; loadImage(imageUrl.value,imageEvent); } loadImageTest(); </script> </body> </html> - 来源：http://www.olnote.com/itlife/note/100000069.aspx