JS_javascript スキルを使用して画像の高さと幅を取得する方法

一般に、画像の高さと幅を取得する方法は次のとおりです:

コードをコピーします コードは次のとおりです:

var img = 新しい画像();
img.src = imgsrc;
var imgWH = CalcImgTiple(img.width, img.height);

しかし、Chromeでテストすると取得できません。 img.width、img.height は両方とも 0

原因: 画像がローカル画像ではなくネットワーク画像である場合
onload イベント ハンドラーは、イメージが正常に読み込まれたときに呼び出されます。

Web 開発をしていると、JavaScript を使って読み込む画像のサイズを取得する必要があるので、当然、img の onload メソッドを思いつきました。Firefox での開発が完了した後、IE に移動しました。デバッグしてみると、img の onload イベントが呼び出されないことが多いことがわかりました。

元のコードは次のとおりです:

コードをコピーします コードは次のとおりです:

var img = 新しい画像;
img.src = "test.gif";
img.onload = function(){
アラート (img.width);
};

このコードは問題ないように見えますが、IE によって onload が呼び出されないのはなぜですか? IE は画像をキャッシュするため、2 回目に読み込まれる画像はサーバーからアップロードされるのではなく、バッファから読み込まれます。 onload イベントはバッファからロードされた画像に対してトリガーされませんか?そこで、次のコードをテストしたところ、うまくいきました~

コードをコピーします コードは次のとおりです:

var img = 新しい画像;
img.onload = function(){
アラート ( img.width );
img.src = "test.gif";

onload を先頭に書き、まずブラウザにこの画像の処理方法を指示し、次にこの画像のソースを指定します。これは正常です。したがって、IE が onload イベントをトリガーしないのではなく、バッファーの読み込みが非常に速いため、img.onload が実行される前に onload イベントがすでにトリガーされているためです。これは Ajax を思い出させます。xmlhttp を記述するときは、最初に onstatechange のコールバック関数を指定してからデータを送信します。原理は同じです。

以上がこの記事の全内容です。皆さんに気に入っていただければ幸いです。