JavaScript 图片加载

网站开发中，某些页面效果（如：图片翻转）需要图片能够立即显示；也有些页面图片比较多，下载时间比较长，需要在图片未下载完成前显示其他图片（表示图片正在下载），下载完成后才把图片显示出来。
    要实现这些效果，一般都会用到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.οnlοad=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.οnlοad=function(){
   alert("onload事件被触发");
   var againLoadImage=new Image();
   againLoadImage.src=url;
   againLoadImage.οnlοad=function(){//由于图片已经载入到当前页面，在IE中，onload事件不会再被触发。
      alert("onload事件再次被触发");
   }        
} 

onerror

图片下载失败的时候触发。

JavaaScript图片加载示例（浏览器兼容）

来源： http://www.olnote.com/itlife/note/100000069.aspx