Get image site in javascrip

Hi E's,
I try to get the height of a image using this code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
</head> 
<body> 
<img src="../../imagem/jpg640x480/DSC_2576.jpg"/>
<script>
var x = document.getElementById('img').height;
alert(x);
</script>
</body> 
</html>

Open in new window

but not work, what is wrong?

The best regards, JC
LVL 4
Pedro ChagasWebmasterAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Tom BeckCommented:
What you have should work. What browser are you using?

It works in Firefox but not in Safari in my tests so far.
0
Tom BeckCommented:
One way to do this is with jquery. For example, this works in Safari, Chrome and Firefox in my tests.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.js"></script>
<script>

$("#img").one("load", function(){
    var img = this;
    setTimeout(function(){
        alert(img.height);
    }, 30);
});

</script>

Open in new window

0
Tom BeckCommented:
Javascript way:
<script>
window.addEventListener('load', function(){
  var x = document.getElementById('img').height;
  alert(x);
});
</script>

Open in new window

0
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

Pedro ChagasWebmasterAuthor Commented:
Hi Tom,
I have test in Safari.
When I going home, I will test your solutions.
Thank you.

The best regards, JC
0
Sar1973Commented:
Try: var x= document.getElementById("img").style.height;
0
DualCoolCommented:
make sure you give your image a height

<img id="imageID" src="path.png" style="height:299px;"/>
0
Pedro ChagasWebmasterAuthor Commented:
HI,
I see all the solutions, and I conclude javascript cant get the size of images, based only in the image, without style. If the image don't have any style associated, is impossible to js determinate the size of the image! Please tell me if I'm wrong.
When I try to know if js can get the size of the images, the objective is create a script for detect if the image is loaded or not loaded. Maybe this not was the correct path to that objective.
What should I do?

The best regards, JC
0
DualCoolCommented:
there is no good way of doing that - what I do is preload the images in an on load function
0
Sar1973Commented:
Have you tried alert(document.getElementById("imageID").style.height;) ?
0
Tom BeckCommented:
I see all the solutions, and I conclude javascript cant get the size of images
Can you provide a live link example of an image that does not work using this method?
<script>
window.addEventListener('load', function(){
  var x = document.getElementById('img').height;
  alert(x);
});
</script>

Open in new window

In my testing, I tried several images picked from Google images and some local images. All of them alerted the height.

The window load listener fires after the main HTML, all CSS, all images and all other resources have been loaded and rendered. Once the browser has the image downloaded, it has to "know" the height of the image in order to allow the proper amount of space in the page layout. Whether you "preload" the images or use window.onload, it's all the same as far as determining the height of a loaded image.
0
DualCoolCommented:
Tom Becks solution does work for getting the height -
 the only problem is that it can get the value before the image has rendered in some browsers sometimes.

Firefox seems to work fine but not ie10 - ie9 - safari unless the images have been cached.
to see what im saying - open a link with the code in it in safari or IE and reload the page 5 times - ill bet at least once in each browser it will alert the value before you see the image.

having said that there are not any other ways that will do any better of a job
0
Pedro ChagasWebmasterAuthor Commented:
Hi Tom, you give a hope.
I try your last solution in two ways:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
</head> 
<body> 
<div id="img"><img src="../../imagem/jpg640x480/DSC_2576.jpg"/></div>
<script>
window.addEventListener('load', function(){
  var x = document.getElementById('img').height;
  alert(x);
});
</script>
</body> 
</html>

Open in new window

The result of was 'undefined'.

The second way:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
</head> 
<body> 
<img src="../../imagem/jpg640x480/DSC_2576.jpg"/>
<script>
window.addEventListener('load', function(){
  var x = document.getElementById('img').height;
  alert(x);
});
</script>
</body> 
</html>

Open in new window

alert not work.

My knowledge in js is poor, so I want ask you, if you can, how you use your code in my initial code.

The best regards, JC
0
Pedro ChagasWebmasterAuthor Commented:
Hi @DualCool, I don't do a refresh in this page, and I don't see your last comment. Thanks for your comment and help.
I want to see the correct code running to analyze your solution.
If you can help also, I appreciate. Thanks.

The best regards, JC
0
DualCoolCommented:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
</head>
<body>
<img id="mypic" src="picpath.jpg">
<script>
window.addEventListener('load', function(){
var a = document.getElementById('mypic').height;
alert(a);
});
</script>
</body>
</html>

here is an example of Tom Beck's code
just change the path of the image
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Pedro ChagasWebmasterAuthor Commented:
Hi @Sar1973, your solution not work, you can see the alert in the attach image (is empty). I try in FF and i.e.11. Anyway, thanks for trying to help.@Sar1973 solution
Hi @DualCool, thank you.
I try in Safari 5.1.2 and work, also i.e. 11 and chrome 32.0.1700.107 m.
Not work in i.e.5, 6, 7, 8 and 9.
In fact, it is a bit viable solution.
Thank you all for the excellent help.

The best regards, JC
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.