Question

I’m dynamically adding IMG components to my DOM using JQuery, but depending on how big they are, I’ll be adding them in different ways. Anyone have a good idea for getting the IMG’s auto sized dimensions BEFORE I add it to the DOM?

NOTE: I was playing around with DOM snippet JQuery manipulation, as described here, but the img dimensions were = 0.

Answer 1

You should be able to do this without appending the image to the DOM. Kristoffer (hey that’s my name too!) is on the right track but the image needs to be loaded before you can try to read the width / height.

var getImageSize = function(src) {
    var img = new Image();
    $(img).bind('load', function(e) {
        var height = img.height;
        var width = img.width;
        document.write('width:' + width + ', height: ' + height);
    });
    img.src = src;
};

getImageSize('http://farm4.static.flickr.com/3261/5791911248_b777cb1dde_b.jpg');

Demo here: http://jsfiddle.net/H3p97/