Get real image width and height with Javascript in Safari/Chrome?

Question

I am creating a jQuery plugin.

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

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...

Doing this on server side is not an option.

Answer 1

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() );
});

Answer 2

The root problem is that WebKit browsers (Safari and Chrome) load JavaScript and CSS information in parallel. Thus, JavaScript may execute before the styling effects of CSS have been computed, returning the wrong answer. In jQuery, I've found that the solution is to wait until document.readyState == 'complete', .e.g.,

jQuery(document).ready(function(){
  if (jQuery.browser.safari && document.readyState != "complete"){
    //console.info('ready...');
    setTimeout( arguments.callee, 100 );
    return;
  } 
  ... (rest of function)

As far as width and height goes... depending on what you are doing you may want offsetWidth and offsetHeight, which include things like borders and padding.

Answer 3

Wow yes! IT's much better to use $window.load() than $document.ready().. I guess the DOM can be ready to be parsed much earlier than the images are done loading!

Answer 4

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 pic_real_width;
var pic_real_height;

$(img).load(function() {
    // Remove attributes in case img-element has set width and height
    $(this).removeAttr("width")
           .removeAttr("height")
           .css({ width: "", height: "" }); // Remove css dimensions as well

    pic_real_width = this.width;
    pic_real_height = this.height;
});

var src = img.src;
img.src = "";
img.src = src; // Triggers onload if image is cached (see comments)

Answer 5

Thanx a lot Alex, this is simple and works very well ! I guess in complex pages with a lot of images and javascript, this might cause performance loss (useless delay before executing anything) and need the tips above at the right place, where these attrs are needed.

Answer 6

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 7

As Luke Smith says, image load is a mess. It's not reliable on all browsers. This fact has given me great pain. A cached image will not fire the event at all in some browsers, so those who said "image load is better than setTimeout" are wrong.

Luke Smith's solution is here.

And there is an interesting discussion about how this mess might be handled in jQuery 1.4.

I have found that it's pretty reliable to set the width to 0, then wait for the "complete" property to go true and the width property to come in greater than zero. You should watch for errors, too.

Answer 8

Amazing, Thanks so much. What a complete mess this all is, stupid we need all these workarounds all the time. Wasted about 6 hours trying to solve this problem, thankfully I came across this.

Answer 9

$("#myImg").one("load",function(){
  //do something, like getting image width/height
}).each(function(){
  if(this.complete) $(this).trigger("load");
});

From Chris' comment: http://api.jquery.com/load-event/

Answer 10

There is now a jQuery plugin, event.special.load, to deal with cases where the load event on a cached image doesn't fire: http://github.com/peol/jquery.imgloaded/raw/master/ahpi.imgload.js

Answer 11

I looove Chrome but I cursed it to hell for being the browser that wouldn't read the dimensions of my freshly ajaxed images. After hours of searching and cursing this is the fix I came up with:

Do a fadeIn before reading any dimensions:

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