By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,384 Members | 1,886 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,384 IT Pros & Developers. It's quick & easy.

How can I figure out the height of an img element before it is appended to the body?

P: 6
I have the next piece of code that works fine in ie:
Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html>
  3. <head>
  4.  
  5. <script language="javascript">
  6.  
  7. function StartUp(){
  8.  var theBody = document.getElementsByTagName("body")[0];
  9.  var rButton = document.createElement('img');
  10.  rButton.src='images/button.gif';
  11.  alert(rButton.height);
  12.  theBody.appendChild(rButton);
  13.  alert(rButton.height);
  14.  };
  15.  
  16. </script>
  17.  
  18. </head>
  19.  
  20. <body bgcolor="#12121F" text="#FFFFFF" onload="StartUp()">
  21. </body>
  22. </html>
  23.  
I get "514" in ie for both alert commands. However, if I try this code in firefox I get "0" for both alert commands. It seems to me as if ie preloads the bitmap at the point where the src property is set so it knows its width and height. On the other hand, firefox seems not to know the image's width and height until the browser actually writes the bitmap to screen. In addition, if I refresh firefox once this code was loaded, I get "514" for both alerts, I want to think that now that ff already wrote the bitmap to screen, its properties are somehow cached.

How can I find out those properties of an image before it is printed to the screen? I need them for some scaling and other stuff.

thanks in advance.
Jul 14 '08 #1
Share this Question
Share on Google+
7 Replies


hsriat
Expert 100+
P: 1,654
Keep rButton.style.display = 'none'.
Append it to the HTML.
Calculate its height.
Make style.display = '';

Just a guess. See if this works.
Jul 14 '08 #2

P: 6
I am actually appending the rButton to the html document at line 12 and then retrieving its height to show it in the 13th line. The problem is that Firefox is not writing the bitmap to the screen when that instruction is executed(the twelve), it seems that the bitmap will appear in the screen just at the point when the function StartUp() is finished. Helppppp!!, can't believe that I'm having issues with Firefox and not with IE, that's bizarre .....
Jul 14 '08 #3

hsriat
Expert 100+
P: 1,654
I am actually appending the rButton to the html document at line 12 and then retrieving its height to show it in the 13th line. The problem is that Firefox is not writing the bitmap to the screen when that instruction is executed(the twelve), it seems that the bitmap will appear in the screen just at the point when the function StartUp() is finished. Helppppp!!, can't believe that I'm having issues with Firefox and not with IE, that's bizarre .....
ummm... use another function to retrieve its height. And call that function after some time delay, say 10ms. If this is appropriate.
Jul 14 '08 #4

rnd me
Expert 100+
P: 427
firfox supports an image onload event.

simply wrap your action code in line 13 into the onload event of the image where you create it.
Jul 14 '08 #5

P: 6
Those solutions by hsriat and rnd_me would do the trick for this code, that's for sure. However, they won't work for what I'm actually intending to accomplish, this code was just for illustrative purposes. Actually what I need to do next involves knowing the height and width of the bitmap button.gif in order to resize other images as well, in certain proportions, so I'm gonna have the same problem with those other images. Perhaps I could wrap and then wrap again the necessary code in the onload events of the images but that doesn't seem optimal and it is certainly far from elegant. Is there a way to force firefox to write the bitmap to the screen at certain point of the code? that would help a lot, whaddya know guys?
Jul 15 '08 #6

rnd me
Expert 100+
P: 427
i have had luck in firefox simply assigning the .src property twice, and checking the size after the second one, but i think this is more luck than elegant design. might be worth a shot for you though.
Jul 15 '08 #7

100+
P: 428
With javascript you can download the image to read its height and width,
and use the image's load event to trigger any code you please.

Expand|Select|Wrap|Line Numbers
  1. function getImgSize(url,callback){
  2.     var im=new Image();    
  3.     im.onload=function(){return callback(im)};
  4.     im.src=url;
  5. }
//test case- use a valid url and any function you like:

getImgSize('/art/sitcat.gif',function(im){
alert(im.src+'\nwidth:'+im.width+'px, height:'+im.height+'px');
})

You can define the function in the second argument,
or reference a method by name.
Jul 15 '08 #8

Post your reply

Sign in to post your reply or Sign up for a free account.