Question

I’m using Jquery to get the width of an image once it is appended to the body. Have a look at this fiddle to get an understanding of what I’m doing.

What I want to do is add each element with a constrained height and read what the respective width is once after it is scaled. The problem as you will see is that the console.log is giving me the value 0 for the width.

Answer 1

Use jQuery .load() function to do all the calculation after image load:

var number = 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);
});​