3

Im having trouble getting Chrome to recognize an Image width or height after the DOM has loaded. The Image is dynamically loaded through phpThumb script (which resizes the image). If I take away the dynamic url and just replace it with the Image's direct url I get no issues and everything works in Chrome but with the dynamic url, chrome doesn't seem to be able to calculate the image width or height.

Anyone have any experience with this? Its doing my head in.

The code in question is :

var theImage     = new Image();
theImage.src     = $image.attr('src');
var imgwidth     = theImage.width;
var imgheight    = theImage.height;

Where imgwidth = 0; for chrome, yet IE, Firefox both report the correct size.

Tourshi
  • 503
  • 1
  • 7
  • 14
  • 3
    It doesn't look like you have any image loaded at the time you are calling this. Do you know how to wait for the image to load to ask for height and width? – Jarrett Widman Mar 04 '11 at 19:34

2 Answers2

5

The right code is .onload and the following function:

var theImage     = new Image();
theImage.src     = $image.attr('src');
theImage.onload = function(){
    var imgwidth     = $(this).width;
    var imgheight    = $(this).height; 
});
Community
  • 1
  • 1
mike
  • 1,526
  • 3
  • 17
  • 25
0

http://jsfiddle.net/cyrilkong/XJUGt/4/

function imgRealSize(img) {
    var $img = $(img);
    if ($img.prop('naturalWidth') === undefined) {
        var $tmpImg = $('<img/>').attr('src', $img.attr('src'));
        $img.prop('naturalWidth', $tmpImg[0].width);
        $img.prop('naturalHeight', $tmpImg[0].height);
    }
    return {
        'width': $img.prop('naturalWidth'),
        'height': $img.prop('naturalHeight')
    };
}

$(function() {
    var target = $('img.dummy');
    var target_native_width;
    var target_native_height;
    target.each(function(index) {
        // console.log(index);
        imgRealSize(this[index]);
        target_native_width = $(this).prop('naturalWidth');
        target_native_height = $(this).prop('naturalHeight');
        $(this).parent('div').append('<p>This image actual size is ' + target_native_width + ' x ' + target_native_height + ', and css is ' + $(this).width() + ' x ' + $(this).height() + '.</p>');
    });
});​
Cyril
  • 3
  • 4