Get actual image size, after resizing it

Question

I have a page filled with thumbnails, resized with css to 150x150, and when I click on a thumbnail, the page dims, and The image is being shown in it\'s true sizes.

Answer 1

One way you could do it is create a separate image object.

function getImageDimensions(path,callback){
    var img = new Image();
    img.onload = function(){
        callback({
            width : img.width,
            height : img.height
        });
    }
    img.src = path;
}

getImageDimensions('image_src',function(data){
    var img = data;

    //img.width
    //img.height

});

That way, you'll use the same image but not the one on the DOM, which has modified dimensions. Cached images, as far as i know, will be recycled using this method. So no worries about additional HTTP requests.