网站开发中，某些页面效果（如：图片翻转）需要图片能够立即显示；也有些页面图片比较多，下载时间比较长，需要在图片未下载完成前显示其他图片（表示图片正在下载），下载完成后才把图片显示出来。
    要实现这些效果，一般都会用到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="width: 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>