JavaScript Imageオブジェクト

1933 ワード

I’m Docneyでは、ヘソ曲がりでJavascriptのルーペを見てよく書けました.考えがはっきりしています.他の収穫はjsのImageの対象を発見しました.彼はこのように使いました.
function getImageSize(imageEl) {
		var i = new Image();
		i.src = imageEl.src;
		return new Array(i.width, i.height);
}
彼はこの関数を利用してイマジネーションのwidthとheightを取得した.本当に珍しいです.jsはまだImageの対象があるとは知らなかったです.先日ECMAScript 5がGecko 1.9.1に追加されたnative JSONオブジェクトを見たことがあります.
ImageオブジェクトはJavaScript 1.1(i.e.since Netscape Navigator 3.0)に導入されています.ブラウザで見た画像は一つの配列で表示されます.この配列はimages、彼はdocumentオブジェクトの属性です.ウェブページの画像は自動的に画像オブジェクトとして認識されます.
document.imags[0],document.imags[1]…また画像にname属性を与えることでアクセスできます.
<img src="img.gif" name="myImage" width=100 height=100>
このように、私たちはdocument.myImageまたはdocument.image[myImage]を通じてこのオブジェクトを訪問することができます.imageオブジェクトは現在、いくつかの画像をプリロードして、まずDOMに入れて、必要な時に直接呼び出して、待つ時間を省き、直接に表示します.JavaScript内のImageオブジェクトは、このニーズをよく実現します.(対象)は「Object HTMLImageElement」の内容を見ることができ、Imageオブジェクトは直接にappedを利用してbodyに追加することができ、呼び出しがとても便利です.
画像オブジェクト:
画像オブジェクトを作成:
  :      =new Image([  ],[  ])
画像オブジェクトのプロパティ:border compute heighspace lowrc name src vspace width
画像オブジェクトのイベント:onaboot on error onkeydown onkeycleas onkeyup onload
注意したいのは、src属性は必ずOloadの後ろに書いてください.そうでないと、プログラムはIEでエラーが発生します.
参照コード:
var img=new Image();
img.onload=function(){alert("img is loaded")};
img.onerror=function(){alert("error!")};
img.src="http://www.abaonet.com/img.gif";
function show(){alert("body is loaded");};
window.onload=show;
は上記のコードを実行した後、異なるブラウザでテストを行い、IEとFFは違いがあることを発見しました.FFでは、対象のロードはbodyのロード過程に含まれています.
IEでは、対象のロードはbodyのロードプロセスに含まれていません.bodyのロードが完了し、window.onloadイベントがトリガされた場合、対象はまだロードされていないかもしれません.img.onloadイベントはwindow.onloadの後にトリガされます.
例はjavascript domのImageオブジェクトを参照してください.画像プリロード
その他の参考文献
1/VOODOO’S INTRODUCTION TO JAVSCRIPT 2/Image Object