1

img/160x180.jpgjquery/javascriptでこれを単独で使用する方法などのURLを含む画像があった場合、その幅と高さを取得できます。私が試してみました

alert($('<img src="img/160x180.jpg"/>').naturalWidth)

以下の例では、undefined を返します。

http://jsfiddle.net/D7dx6/

4

2 に答える 2

3

更新しました：

alert($('<img src="http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif"/>')[0].width);

編集— それは本当に意味がありません。イベントハンドラーにある必要があります。

$('<img/>', {
  'load': function() { alert(this.width); },
  'src': 'http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif'
});

このコードは、「src」が設定されていて、「load」ハンドラが確立される前にキャッシュ内で画像が見つかった場合にボールをドロップすることがあるため、IE で問題が発生する可能性があることに注意してください。その場合、これを行うことができます：

$('<img/>', { 'load': function() { alert(this.width); } }).prop('src', 'http://...');

「naturalWidth」プロパティはありません。

この場合、オーバーヘッドはほとんど関係ありませんが、次のように jQuery を使用せずにこれを行うことができます。

var img = new Image();
img.onload = function() {
  alert(img.width);
};
img.src = "http://placekitten.com/300/400";

注意すべきことの 1 つは、実際のページ要素 (つまり<img>、ページ上のタグ) を見ている場合、実際のサイズを上書きする「幅」属性が含まれている可能性があることです。画像を再度フェッチすると、通常はキャッシュから取り出されますが、モバイル デバイス上の巨大な画像には問題が生じる可能性があります。

(編集— Grahamは「naturalWidth」があると指摘していますが、現時点では十分にサポートされていません。)

于 2012-06-19T23:07:11.997 に答える
2

naturalWidthnaturalHeightまだ十分にサポートされていません: https://developer.mozilla.org/en/DOM/HTMLImageElement を参照してください。

現在DOMに存在するかどうかに関係なく、画像の元のサイズを決定する純粋なJavaScriptの方法は、Imageオブジェクトを使用することです。

var img = new Image();
img.src = 'path/to/img.jpg';
// you'll probably want to use setTimeout to wait until the imh.complete is true
console.log(img.width);
于 2012-06-19T23:19:31.993 に答える