Get the real width and height of an image with JavaScript? (in Safari/Chrome)

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:

Answer 1

I checked out the answer of Dio and it works great for me.

$('#image').fadeIn(10,function () {var tmpW = $(this).width(); var tmpH = $(this).height(); });

Make sure that you call all your functions aso. that handle with the image size in the recaller function of fadeIn().

Thanks for this.

Answer 2

If the image is already used, you sholud:

1. set image simensions to initial

   image.css('width', 'initial'); image.css('height', 'initial');

2. get dimensions

   var originalWidth = $(this).width(); var originalHeight = $(this).height();

Answer 3

You can use the naturalWidth and naturalHeight properties of the HTML image element. (Here's more info).

You would use it like this:

//you need a reference to the DOM element, not a jQuery object. It would be better if you can use document.getElementByTagsName or ID or any other native method
var pic = $("img")[0];
var pic_real_width = pic.naturalWidth;
var pic_real_height = pic.naturalHeight;

It seems like this works in all browsers except on IE from version 8 and below.

Answer 4

Here's a cross browser solution that triggers an event when your selected images are loaded: http://desandro.github.io/imagesloaded/ you can look up the height and width within the imagesLoaded() function.

Answer 5

For functions where you do not want to alter the original placement or image.

$(this).clone().removeAttr("width").attr("width");
$(this).clone().removeAttr("height").attr("height);

Answer 6

this works for me (safari 3.2), by firing from within the window.onload event:

$(window).load(function() {
  var pic = $('img');

  pic.removeAttr("width"); 
  pic.removeAttr("height");

  alert( pic.width() );
  alert( pic.height() );
});