Question

So I am dynamically creating an image and I wish to get the image dimensions. Is it possible to do this before the image is attached to the DOM? At the moment I am doing this:

 var arrow = $('<img src="' + parameters.arrowRight + '" />');
 arrow.load(function() {  
      console.log("size: " + $(this).height() + " " + $(this).width());
  });

but the height and width are both reported as zero. The image is actually being fetched as I can see the GET request in firebug.

Answer 1

No. It is not possible to get the dimensions of any element until it is attached to the DOM.

A workaround would be to give the image the css: margin-left: -10000px. You can then append it, but it will not be visible. You can then get its’ dimensions and do with it as required.