9

動的に作成された画像タグを使用して、画像のサイズを取得する必要があります。できます。ただし、attr（'width'）を使用する場合と、画像をDOMに追加しない場合のみを使用してください。それ以外の場合、返される次元はゼロです。なんで？:)

this.img = $('<img/>', {'src': e.url} );           // generate image
this.img.appendTo('body');                         // add to DOM
this.img.load(function(self){return function(){    // when loaded call function
    console.log(self.img.attr('src'));
    console.log(self.img.attr('width'));
    console.log(self.img.width());
    console.log(self.img.css('width'));
}; }(this) );                                      // pass object via closure

そこで、画像を生成してDOMに追加し、画像が読み込まれたときに呼び出されるハンドラー関数を定義します。クロージャーを使用して、クロージャー内の「自己」と呼ばれる元のオブジェクトへの参照を渡します。参照が正常であることを確認するために、画像のURLをダンプしています。出力は次のとおりです。

pic.jpg
0
0
0px

ここで奇妙なことがあります。上の2行目（appendTo）を削除すると、突然機能しますが、attr（'width'）の場合のみです。

pic.jpg
1024
0
0px

この振る舞いは私には意味がありません。上記の6つのケースすべてで実際の画像サイズを取得することを期待しています。問題を回避する方法はわかりましたが、なぜそれが発生するのかを理解したいと思います。バグですか？それとも、それに論理的な理由がありますか？

上記の結果はSafariの場合です。Chromeでテストしたところ、最初の例ではすべて正しい値が得られましたが、2番目の例ではまだ2つのゼロがあります。とても奇妙です。

4

4 に答える 4

3

Safariの信頼できるソリューションを見つけました。

  • 画像を作成する
  • load（）ハンドラーをアタッチします
  • その後だけ、属性を設定してsrcください!!

widthがゼロを返す理由はまだわかりませんが、srcを設定した後でのみロードハンドラーをアタッチすると、予期しないことが発生するようです。IEでさらに別の問題が発生したためにそのアイデアを思いついたので（ハンドラーがアタッチされる前にロードされたイメージを考慮したため、ロードハンドラーを呼び出さなかった）、私が学んだ教訓は、常に上記の順序。

于 2010-12-11T03:37:54.680 に答える
2

あなたのコードをfirebugとchromeで試しましたが、期待どおりに動作します：

var src = 'http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif';

this.img = $('<img/>', { 'src': src } );
this.img.appendTo('body');                         // add to DOM
this.img.load(function(self){return function(){    // when loaded call function
    console.log(self.img.attr('src'));
    console.log(self.img.attr('width'));
    console.log(self.img.width());
    console.log(self.img.css('width'));
 }; }(this) );

次のようになりました：

http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif
215
215
215px

行を削除した後appendTo()、Chromeでの動作を再現することができますが、奇妙なことはわかりません。width()「表示された」要素の実際の幅を計算しています。たとえば、画像を非表示のdivに配置するたびに、==0になります。

appendTo行を次の行に置き換えてみてください。同じようになります。

this.img.appendTo( $('<div/>').css('display', 'none') );

アップデート：

Safari 3.1.2の結果は、DOMに追加すると、Chromeとまったく同じように機能します。

imgがDOMに挿入されていない場合、許容できる（奇妙さのない）結果も得られます：

http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif
215
0
0px

私はあなたのセットアップにユニークな何かがあるに違いないと確信しています...またはそれはSafari@Mac OSXのバグです（Windows環境でSafariを試しました）。

于 2010-12-10T17:11:47.633 に答える
0

jQueryオブジェクトを割り当ててから、画像に対してload関数を呼び出す方法は、少しやり過ぎであるように思われます。そのため、jQueryがこのように動作する理由を理解するのは困難です。

これを試して：

this.img = $('<img />').attr('src', e.url).appendTo('body');
console.log('width: ' + this.img.width());

画像がDOMに挿入された後、それを取得するのに最適です。

これを試すこともできます：

this.img = $('<img />').attr('src', e.url).css({
   'width': 'auto',
   'height': 'auto'
}).appendTo('body');
console.log('width: ' + this.img.width());
console.log('height: ' + this.img.height());
于 2010-12-08T00:14:42.610 に答える
0

私はあなたの閉鎖があなたが望むように働いているとは思わない。次のようなことを試しましたか？

this.img.load(function(){                          // when loaded call function
    console.log(this.attr('src'));
    console.log(this.attr('width'));
    console.log(this.width());
    console.log(this.css('width'));
});
于 2010-12-08T01:16:15.193 に答える