Question

I am creating a jQuery plugin.

How do I get the real image width and height with Javascript in Safari?

The following works with Firefox 3, IE7 and Opera 9:

var pic = $('img')  // need to remove these in of case img-element has set width and height pic.removeAttr('width');  pic.removeAttr('height');  var pic_real_width = pic.width(); var pic_real_height = pic.height(); 

But in Webkit browsers like Safari and Google Chrome values are 0.

Answer 1

Webkit browsers set the height and width property after the image is loaded. Instead of using timeouts, I’d recommend using an image’s onload event. Here’s a quick example:

var img = $('img')[0]; // Get my img elem var pic_real_width, pic_real_height; $('<img/>') // Make in memory copy of image to avoid css issues     .attr('src', $(img).attr('src'))     .load(function() {         pic_real_width = this.width;   // Note: $(this).width() will not         pic_real_height = this.height; // work for in memory images.     }); 

To avoid any of the effects CSS might have on the image’s dimensions, the code above makes an in memory copy of the image. This is a very clever solution suggested by FDisk.

You can also use the naturalHeight and naturalWidth HTML5 attributes.