JavaScript画像の読み込み

ウェブサイトの開発では、いくつかのページ効果(例えば、画像の反転)は、すぐに画像を表示する必要があります.また、いくつかのページの画像が多いです.ダウンロード時間が長いので、画像がダウンロードされていない前に他の画像(写真がダウンロードされていることを示しています.)を表示し、ダウンロードが完了したら、画像を表示します.    これらの効果を実現するためには、JavaScriptの中のImageオブジェクトが使われます.
Imageオブジェクトの主な属性
src
写真の住所
complettee
Imageがブラウザでキャッシュされているか、または現在のページに読み込まれているかを示します.
    この属性はIEブラウザではちょっと違っています.IEブラウザの中のcomplettee属性はオンラインイベントの後に変更されます.Firefox、Operaなどのブラウザはオンラインの前に変更されました.つまり、ピクチャが正常にダウンロードでき、ブラウザに画像がキャッシュされていない場合、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       ");
   }        
} 

オーロラ
画像のダウンロードに失敗したときにトリガします.
Javaa Script画像の読み込み例(ブラウザ対応)

   
   
   //url：    。imageEvent：      ，imageEvent.onload        ，imageEvent.onerror        。
   function loadImage(url,imageEvent){
      var img = new Image();//    Image  ，       。
      if(imageEvent.onerror!=null){
         img.οnerrοr=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.οnlοad=function(){//           imageEvent.onload  。
               imageEvent.onload.call(img);// imageEvent.onload   this   Image  。
            };
         }     
      }      
   }
   


   
   
   

   
   
   
   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();
   

ソース:http://www.olnote.com/itlife/note/100000069.aspx