2

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.

tshepang
  • 12,111
  • 21
  • 91
  • 136
Richard H
  • 38,037
  • 37
  • 111
  • 138

2 Answers2

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.

Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339
  • Who ever down-voted: Why? This is the only solution to getting the dimensions of a non-DOM inserted element. Got a better idea? Post it. – Rory McCrossan Nov 24 '11 at 11:47
  • @RoryMcCrossan I'm trying to fetch its dimensions after appending to the DOM but it doesn't seem to be working. When you say "append to the DOM" do you mean this (which is what I'm doing): `img = document.createElement("img"); img.src = s; $('#imgwrapper').appendChild(img);` where `s` is the dynamically loaded image source. I think in this case I've appended the image to the DOM but when I try `$('#imgwrapper').find('img').css('width')`, I still get 0. Any ideas? – user961627 Jan 15 '13 at 10:08
  • 1
    Try `height()`: `$('#imgwrapper').find('img').height()`. If that doesn't work it's probably best if you start a new question. – Rory McCrossan Jan 15 '13 at 10:11
  • Didn't work. I've asked the new question here: http://stackoverflow.com/questions/14335503/find-the-dimensions-of-a-dynamically-loaded-but-dom-appended-image-using-jquery – user961627 Jan 15 '13 at 10:18
0

maybe this will help:

http://api.jquery.com/load-event/

This method is a shortcut for .bind('load', handler).

The load event is sent to an element when it and all sub-elements have been completely loaded. This event can be sent to any element associated with a URL: images, scripts, frames, iframes, and the window object.

For example, consider a page with a simple image:

<img src="book.png" alt="Book" id="book" />

The event handler can be bound to the image:

$('#book').load(function() {  
   // Handler for .load() called.  
});
vonsko
  • 387
  • 4
  • 10
  • I am using the load event, the issue is that the element is dynamically created and I need the dimensions before rendering the image visible in the page. – Richard H Nov 24 '11 at 13:46
  • mhm, i must admit i was looking at something else while posting it, sorry. iam so ashamed right now ;) as a matter of fact i did some test and above workaround is best solutions unfortunatelly :/ – vonsko Nov 24 '11 at 14:08
  • but also found this topic which is (i think) very similiar: http://stackoverflow.com/questions/4285042/can-jquery-ajax-load-image – vonsko Nov 24 '11 at 14:13