1

私は本当に奇妙な問題を抱えています。次の方法で画像の幅と高さを取得しようとしています。

  1. 画像タグを作成し、それに.srcを追加します。
  2. この画像タグをdocument.bodyに追加します。
  3. この画像タグを表示します（display：inline）。
  4. 要素の.offsetWidthと.offsetHeightを取得します。
  5. 画像タグを隠す（display：none）;

これはすべてJSを使用して行われ、すべて私のローカルホストで非常にうまく機能しますが、クライアントホスティングプロバイダーにサイトをアップロードしたとき、私は驚いていました。ステップ4でoffsetWidthと.offsetHeightは0でした。なぜそれが起こるのですか？ステップ3の後でステップ4の前に何らかの「フラッシュ」が必要だと思いますが、正確にはわかりません。助言がありますか ？ありがとうございました。

4

3 に答える 3

1

これは、画像がまだ読み込まれていないことが原因である可能性があります。次のようなものを試してください。

img.onload = function() {
  // get the offsetWidth and offsetHeight
}
于 2012-08-15T14:36:16.007 に答える
1

画像が実際にネットワーク経由で読み込まれるのを待つ必要があります。DOMに追加する必要もありません。

var img = new Image();
img.onload = function() {
  handleImageSize(this.width, this.height);
};
img.src = "http://whatever.com/your/img.jpg";

ここで、「handleImageSize」は、画像のサイズで行う必要があることをすべて実行するために作成する関数になります。

于 2012-08-15T14:37:17.240 に答える
0

他の回答が示唆しているように、画像がDOMによって完全にロードされていないことが原因です。ローカルで画像を読み込んでいると思われるため、これはローカルサーバーで正常に機能していました。つまり、画像はほぼ瞬時に読み込まれていました。ただし、それらをサーバーに移動した後、わずかな遅延があります。これは見落とされがちな問題であり、簡単に修正できます。

他の答えがトリックを行います。しかし、ここに議論のためのjQueryバージョンがあります

var img = $('<img>', {
    src: 'http://dummyimage.com/150/000/fff.gif'
}).one('load', function() {
    var offsets = $(this).offset();
});

$('body').append(img);

jsFiddle

于 2012-08-15T14:45:14.897 に答える