Solved

Get image site in javascrip

Posted on 2014-02-13
15
214 Views
Last Modified: 2014-02-17
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
0
Comment
Question by:Pedro Chagas
  • 5
  • 4
  • 4
  • +1
15 Comments
 
LVL 38

Expert Comment

by:Tom Beck
ID: 39855960
What you have should work. What browser are you using?

It works in Firefox but not in Safari in my tests so far.
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 39856043
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
 
LVL 38

Expert Comment

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

Open in new window

0
 
LVL 3

Author Comment

by:Pedro Chagas
ID: 39856240
Hi Tom,
I have test in Safari.
When I going home, I will test your solutions.
Thank you.

The best regards, JC
0
 
LVL 9

Expert Comment

by:Sar1973
ID: 39858588
Try: var x= document.getElementById("img").style.height;
0
 
LVL 2

Expert Comment

by:DualCool
ID: 39860587
make sure you give your image a height

<img id="imageID" src="path.png" style="height:299px;"/>
0
 
LVL 3

Author Comment

by:Pedro Chagas
ID: 39863448
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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 2

Expert Comment

by:DualCool
ID: 39863512
there is no good way of doing that - what I do is preload the images in an on load function
0
 
LVL 9

Expert Comment

by:Sar1973
ID: 39864675
Have you tried alert(document.getElementById("imageID").style.height;) ?
0
 
LVL 38

Assisted Solution

by:Tom Beck
Tom Beck earned 200 total points
ID: 39864730
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
 
LVL 2

Assisted Solution

by:DualCool
DualCool earned 120 total points
ID: 39865788
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
 
LVL 3

Author Comment

by:Pedro Chagas
ID: 39865871
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
 
LVL 3

Author Comment

by:Pedro Chagas
ID: 39865879
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
 
LVL 2

Accepted Solution

by:
DualCool earned 120 total points
ID: 39865887
<!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
 
LVL 3

Author Comment

by:Pedro Chagas
ID: 39866157
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

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Sum Column in GridView 3 43
Replace &lt; with < 14 55
Use a select control to call a javascript function 5 29
Angular - disable input field on page load 4 13
In this article, we'll look how to sort an Array in JavaScript, including the more advanced techniques of sorting a collection of records either ascending or descending on two or more fields. Basic Sorting of Arrays First, let's look at the …
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

910 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now