jquery - jquery img width() は0を返します

Question

奇妙な問題 このコードの理由を知っていますか:

var img = new Image();
img.src = 'images/img1.jpg';

$(img).on('load', function() {
   alert($(this).width());

});

Firefox、Chrome では 0 を返しますが、IE9 では正しい値を返しますか? すべてのブラウザで適切な値を取得するには? jQuery 1.8.2 の使用

Answer 1

jsBin デモ

var img = new Image();
img.src = 'images/img1.jpg';

$(img).on('load', function() {
   alert(this.width);
});

または純粋な JS の場合:

var img = new Image();
img.src = 'images/img1.jpg'; 

img.onload = function() {
   alert(this.width);
};

Answer 2

imagein を dom.width()リターンに追加するまで0

var img = new Image();
img.src = 'http://jsfiddle.net/img/logo.png';
$(img).on('load', function() {
    console.log(this.width); // 160
    console.log($(this).context.width); // 160
    console.log($(this).width()); // 0
    $('body').append($(this));
    console.log($(this).width()); // 160
});

これを確認してください。

Answer 3

jQuery がオブジェクトのサイズを決定する方法は、style属性を検査することです (afaik)。画像が DOM に追加されることはないため、DOM はそれを知りません。

そうは言っても、ここで jQuery が必要な特定の理由はわかりません。

var img = new Image();
img.onload = function() {
    alert(this.width);
}
img.src = 'http://example.org/path/to/image.jpg';

jQuery を使用してディメンションを設定するには、次のようにします。

$(this)
    .width(this.width)
    .height(this.height);

<img />DOM に を追加するのとは異なり、ブラウザはレンダリング時に画像の大きさをすでに知っているため、なぜそれが必要なのかはわかりません。

ところで、これらのステートメントの順序は重要です。プロパティを設定する前にロード ハンドラーを登録する必要があり.srcます。そうしないと、画像がブラウザーによってキャッシュされている場合に、ロード イベントを見逃す可能性があります。

Answer 4

jQueryのドキュメントによるとhttp://api.jquery.com/load-event/

画像で使用する場合のロード イベントの注意事項: 開発者が .load() ショートカットを使用して解決しようとする一般的な課題は、画像 (または画像のコレクション) が完全に読み込まれたときに関数を実行することです。これには注意すべき既知の警告がいくつかあります。これらは：

1. クロスブラウザーで一貫して確実に動作しない 2. 画像の src が以前と同じ src に設定されている場合、WebKit で正しく起動しない 3. DOM ツリーを正しくバブルアップしない 4. できるブラウザのキャッシュに既に存在する画像の起動を停止します

ドキュメントのコメントを見ると、多くの人が同じ問題を抱えています。これは、通常、src が以前と同じように設定されている場合に、webkit で load イベントが発生しないためです...おそらく、プレースホルダー画像を設定してから変更する必要がありますソース属性。