11

特定のソースを指定して、画像の元の幅と高さを取得する必要があります。私の現在の方法は次のとおりです。

img.tag = "<img style='display:none;' src='" + img.src + "' />";
img.Owidth = 0;
img.Oheight = 0;

$(img.tag).load(function() {
    img.Owidth = $(this).width();
    img.Oheight = $(this).height();
}).appendTo(img.parent());

ロードされた画像の元のサイズであり、Owidthです。Oheight次のことを考えると、これを行うためのより良い方法があるかどうか疑問に思っています。

  • 画像はすでに読み込まれている可能性がありますが、元のサイズとは異なるサイズで表示されます。
  • 画像はまだ読み込まれていません
4

2 に答える 2

19

クロスブラウザ：

jsFiddleデモ

$("<img/>").load(function(){
    var width  = this.width,
        height = this.height; 
    alert( 'W='+ width +' H='+ height);
}).attr("src", "image.jpg");

HTMLImageElementプロパティ/HTML5準拠のブラウザ

すべてのHTMLImageElementプロパティについて調査する場合：https ：//developer.mozilla.org/en/docs/Web/API/HTMLImageElementこれらのプロパティの多くは、最新のHTML5準拠のブラウザ
で すでに利用可能であり、jQueryのメソッドを使用してアクセスできます。.prop()

jsFiddleデモ

var $img = $("#myImage");

console.log(
    $img.prop("naturalWidth") +'\n'+  // Width  (Natural)
    $img.prop("naturalHeight") +'\n'+ // Height (Natural)
    $img.prop("width") +'\n'+         // Width  (Rendered)
    $img.prop("height") +'\n'+        // Height (Rendered)
    $img.prop("x") +'\n'+             // X offset
    $img.prop("y")                    // Y offset ... 
);
于 2012-07-16T22:25:20.900 に答える
17

ChromeとFirefox（そしてできればすぐにIE）の場合、次を使用できます...

var width = $('img').prop('naturalWidth');
var height = $('img').prop('naturalHeight');
于 2014-10-01T00:14:47.303 に答える