[解決済み】JavaScriptで画像の本当の幅と高さを取得する？(サファリ/クロームの場合)

質問

jQueryのプラグインを作成しています。

SafariでJavascriptを使用して、実際の画像の幅と高さを取得するには？

以下は、Firefox 3、IE7、Opera 9で動作します。

var pic = $("img")

// need to remove these in of case img-element has set width and height
pic.removeAttr("width"); 
pic.removeAttr("height");

var pic_real_width = pic.width();
var pic_real_height = pic.height();

しかし、SafariやGoogle ChromeなどのWebkitブラウザでは、値は0になります。

解決方法は？

Webkit ブラウザは、画像が読み込まれた後に height および width プロパティを設定します。 タイムアウトを使用する代わりに、画像のonloadイベントを使用することをお勧めします。 以下に簡単な例を示します。

var img = $("img")[0]; // Get my img elem
var pic_real_width, pic_real_height;
$("<img/>") // Make in memory copy of image to avoid css issues
    .attr("src", $(img).attr("src"))
    .load(function() {
        pic_real_width = this.width;   // Note: $(this).width() will not
        pic_real_height = this.height; // work for in memory images.
    });

CSSが画像の寸法に及ぼす影響を避けるため、上記のコードでは画像のインメモリーコピーを作成しています。 これは FDディスク .

また naturalHeight と naturalWidth HTML5 の属性です。