CODEWITHSUNDEEP
javascriptjquerywidthimage
captDaylight
captDaylight

Reputation: 2234

Getting the width from an scaled image

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.

Upvotes: 2

Views: 1288

Answers (3)

Diego
Diego

Reputation: 18359

Mohsen and Justice are right. However, you can still simplify a bit:

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

Upvotes: 1

Mohsen
Mohsen

Reputation: 65785

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

Upvotes: 4

Justice Erolin
Justice Erolin

Reputation: 2879

http://jsfiddle.net/w7rcn/

The width was being "read" before the image could fully download.

So, we used the same concept, but applied it after the img load event had fired:

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

Upvotes: 1

Related Questions