スケーリングされたイメージから幅を取得する

Question

イメージがボディに追加されると、イメージの幅を取得するためにJqueryを使用しています。私がしていることを理解するためにthis fiddleを見てください。

私がしたいことは、各要素を拘束された高さで追加し、それぞれの幅が拡大縮小された後に一度読み取ることです。問題は、console.logが私に幅の値0を与えていることです。

Answer 1

使用jQueryのイメージのロード後にすべての計算を行うには.load()機能：

VAR番号= 0;

$(document).ready(function(){ 
    setInterval(function(){ 
     console.log(); 
     $('.container').prepend(
      $('<img/>').attr({ 
      src: "http://www.upress.umn.edu/book-division/images-1/other images/blockc.gif/image_thumb" 
      id:'img' + (number++) 
}).load(function(){ 
console.log($(this).width()) 
}) 
    },3000); 
});​ 

Answer 2

http://jsfiddle.net/w7rcn/

幅は、画像が完全にダウンロードすることができる前に「読み」されていました。

だから、私たちは同じ概念を使用しますが、IMG負荷イベントが発生した後にそれを適用：

$('#img' + String(number)).load(function() { 
      console.log($(this).width()); 
     }); 

Answer 3

モハゼンとジャスティスが正しい。ただし、ビットを簡略化することはできます：

var number = 0; 
$(document).ready(function(){ 
    setInterval(function(){ 
     console.log(); 
     $('.container').prepend($('<img ' 
       + 'id="img'+number+'"src="http://www.upress.umn.edu/' 
       + 'book-division/images-1/other-' 
       + 'images/blockc.gif/image_thumb">').load(function() { 
      console.log($(this).width());    
     })); 
     number++; 
    }, 3000); 
});​