javascript - ajax で読み込まれた画像のサイズを取得する

Question

$element.width()orを使用してみましたが$element.height()、どちらも ajax で読み込まれた画像の値を取得するのに役立たないようです。jQueryまたは通常のJSでこれらを取得するにはどうすればよいですか? 画像には CSS の設定がありません。

Answer 1

コンテンツをロードするときは、ajax の成功で次のようなものを使用します

var real_image_sizes = {};
$('your loaded images').one('load', function() {
    //get real image size
    real_image_sizes.width = this.width;   // Note: $(this).width() will not
    real_image_sizes.height = this.height; // work for in memory images.
}).each(function() {
    if(this.complete) $(this).load();
});

Answer 2

ロード ハンドラを使用するだけです。

var $img = $('<img/>').attr('src','img_url.jpg').load(function(){ 
    console.log('width: ', $img.width(), ' height: ', $img.height()); 
});
$('body').append($img);

ここにフィドルがあります