image loading problem

Danfoord

08-10-2008, 10:30 PM

This problem has been bugging me for several days now.

Why is it that the webpage below needs to be refreshed before photos[0].width (or height) return the correct size.

On the first load it returns 0 for both width and height.

If I insert an alert window before photoWidth[0] = photos[0].width; then the correct width AND height are returned.

With the help of other posters I think I have found out it is not a problem
with the speed of the images being loaded. I have tried:
setTimeout
tried dummy loops up to 100000000
a pause computer function which works using the Date object. I pause the computer for upto 5 seconds and still the width and height were 0.

An alert window is the ONLY work around at the moment.

<head>
<title></title>
<meta http-equiv="content-type" content="text/html;charset=UTF-8"/>
<link rel="stylesheet" href="stylesheet.css" type="text/css">
<script src="javafunctions.js"></script>
<script language="JavaScript1.1">
var photos=new Array()
var photoWidth = new Array()
var photoHeight = new Array()

photos[0]= new Image();
photos[1]= new Image();
photos[0].src="1.jpg"
photos[1].src="2.jpg"
photos[0].name="1.jpg"
photos[1].name="2.jpg"

//alert("blah blah");
photoWidth[0] = photos[0].width;
photoWidth[1] = photos[1].width;
photoHeight[0] = photos[0].height;
photoHeight[1] = photos[1].height;

</script>
</head>
<body>
<script language="JavaScript1.1">

</script>
</body>

Thanks

Dan

Arty Effem

08-11-2008, 10:16 AM

If you want the dimensions of an image, first you create the image object, then install an onload handler that initialises all subsequent code that relies on the availability of the dimensions, then you apply the src property.
It's advisable to install an onerror handler also in case the image doesn't load.

Solutions involving time delays are right out.

Danfoord

08-11-2008, 01:57 PM

Just to clarify are you saying that I should make my code something like this:
(forgetting the error handler for the moment)

<head>
<title></title>
<meta http-equiv="content-type" content="text/html;charset=UTF-8"/>
<link rel="stylesheet" href="stylesheet.css" type="text/css">
<script src="javafunctions.js"></script>
<script language="JavaScript1.1">
var photos=new Array()
var photoWidth = new Array()
var photoHeight = new Array()

photos[0]= new Image();
photos[1]= new Image();
//photos[0].src="1.jpg"
//photos[1].src="2.jpg"
photos[0].name="1.jpg"
photos[1].name="2.jpg"

//alert("blah blah");
photoWidth[0] = photos[0].width;
photoWidth[1] = photos[1].width;
photoHeight[0] = photos[0].height;
photoHeight[1] = photos[1].height;

</script>
</head>
<body onload = "createpage('Maintain radio silence', photos[0].name,photoWidth,photoHeight);"
>
</body>

Dan

Arty Effem

08-11-2008, 07:06 PM

J
//photos[0].src="1.jpg"
//photos[1].src="2.jpg"
...
<body onload = "createpage('Maintain radio silence', photos[0].name,photoWidth,photoHeight);"

If you use a body tag onload handler as you suggest, then you can apply the src as before since the function won't be called until the images are loaded.

Danfoord

08-12-2008, 01:15 AM

Job done.

Thanks