PDA

View Full Version : How to check size of graphic before loading?

RichardE
10-16-2002, 09:39 PM
How can I check the size of a graphic file below loading it so that I can position it accordingly?

Thanks in advance!
beetle
10-16-2002, 09:44 PM
Well, you can preload it into a variable and then check it before dislpaying it...

var img1 = new Image()
img1.src = "images/pic1.gif";
img1.onload = doSomething;

function doSomething() {
/*
Use this function to do what you need with the image. Swap it's source with another image, or dynamically append it to the document, position it properly...whatever...
*/
}
joh6nn
10-16-2002, 10:18 PM
i believe that once you've preloaded the image, you can check its size, but don't hold me to this, i've never done it:

var img1 = new Image()
img1.src = "images/pic1.gif";
alert(img1.width);
alert(img1.height);
beetle
10-16-2002, 10:42 PM
I'll hold you to it :D

Yes, you can check it...but the image has to be fully loaded.
joh6nn
10-16-2002, 11:21 PM
ok, i'll take your word for it beetle.

just to make it ultra clear:

just because the picture has loaded into the cache, doesn't mean it's visible. so the size can be checked before the picture ever makes it to the screen.
adios
10-17-2002, 04:51 AM
You can also use CSS to position it correctly, regardless of its dimensions.

<html>
<head>
<title>untitled</title>
<style type="text/css">
#pos1 {position:absolute;right:0px;bottom: 0px;}
#pos2 {position:absolute;left:0px;bottom: 0px;}
</style>
</head>
<body>
<img id="pos1" src="http://www.codingforums.com/images/newthread.gif">
<img id="pos2" src="http://www.codingforums.com/images/go.gif">
</body>
</html>
Quiet Storm
10-17-2002, 05:26 AM
Originally posted by joh6nn
i believe that once you've preloaded the image, you can check its size, but don't hold me to this, i've never done it:

var img1 = new Image()
img1.src = "images/pic1.gif";
alert(img1.width);
alert(img1.height);

WOW! That's cool!