...

View Full Version : very simple function not functioning.



Danfoord
08-07-2008, 08:03 PM
Dear All

I have a java function which doesn't seem to work on the initial load of a webpage:

function widthfind(i){
window.alert("i = " + i);
var image = new Image();
var thisphotowidth ="";
image.src = i;
thisphotowidth = image.width;
window.alert("thisphotowidth = " + thisphotowidth);
return thisphotowidth;
}

When I refresh the page it works.
I have left the window.alerts in for debugging on the first run through of the
code i shows the file path of my image but thisphotowidth = 0
On refresh i is the same again and thisphotowidth is the size of the photo.

What is flummoxing me is that another function, yes you guessed it, heightfind() is working fine on the initial run and returning the height of the photo first time round with no refreshes necessary.

function heightfind(j){
window.alert("j = " + j);
var image = new Image();
var thisphotoheight ="";
image.src = j;
thisphotoheight = image.height;
window.alert("thisphotoheight = " + thisphotoheight);
return thisphotoheight;
}

Any clues?


Thanks

Dan

ninnypants
08-07-2008, 08:12 PM
It is because the DOM has not loaded the image yet. You do set a new image correctly and pass the src in correctly too, but the image isn't being loaded until the function is called. Once the function is called the image loads but as soon as the browser starts to load the image it moves on to the next line of code, so at that point "image.width" has no width.

Try this it should help


function widthfind(i){
window.alert("i = " + i);
var image = new Image();
var thisphotowidth ="";
image.src = i;
thisphotowidth = image.width;
setTimeout("window.alert("thisphotowidth = " + thisphotowidth);
return thisphotowidth;",1000)//this will give your browser 1 second to load the image
}


Also if you are calling heightfind after widthfind it may be returning the height of image i

Danfoord
08-07-2008, 08:43 PM
Thanks for that , however that now means that the function which is waiting for the returned width is not receiving it and I am getting another
error message.
"NaN"



Dan

Danfoord
08-07-2008, 08:48 PM
Thanks for that , however that now means that the function which is waiting for the returned width is not receiving it and I am getting another
error message.
"NaN"

Am I going to have to set as Time out for all following functions?
It seems that


Dan

ninnypants
08-07-2008, 08:51 PM
What is the reason for these functions? Are you trying to write them to the page? if so you could just do something like this after each image was loaded

<p><script type="text/javascript">document.write(image.width);</script></p>
Also do you need the images to only load when you call the function or can you set them before like this


images[0] = new Image();
images[1] = new Image();
images[0].src = i;
images[1].src = j;

That way they would preload when the page loads

Danfoord
08-07-2008, 08:58 PM
Sorry about the mangled previous posts I'm clearing my cache each time I load my test page and something went a bit awry.

Dumb question but does preloading them mean that they will be visible?

Dan

ninnypants
08-07-2008, 10:02 PM
nope not until you assign their src to an image tag with one of the following


document.imagename.src = images[0].src;
document.imagename.setAttribute("src",images[1].src);

Danfoord
08-08-2008, 01:41 PM
Spot on.

Works. Preloaded the images on the inital page and circumvented the problem.

Dan

Danfoord
08-10-2008, 08:08 PM
Arse!
Have realised, after takeing out some alert boxes, that they were slowing the process down and allowing things to load before the process progressed.
I'm back to square one.
Please ignore the v. bad coding of the initial loading of the photos (I will fix that once the page works!).

Could you confirm very quickly that this page is preloading? -


<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 which=0


/*Change the below variables to reference your own images. You may have as many images in the slider as you wish*/
photos[0]= new Image();
photos[1]= new Image();
photos[2]= new Image();
photos[3]= new Image();
photos[0].src="photos/ kev 1.jpg"
photos[1].src="photos/ kev 2.jpg"
photos[2].src="photos/kev 3.jpg"
photos[3].src="photos/ kev 4 (2001 birthday).jpg"
photos[0].name="photos/ kev 1.jpg"
photos[1].name="photos/ kev 2.jpg"
photos[2].name="photos/ kev 3.jpg"
photos[3].name="photos/ kev 4 (2001 birthday).jpg"


</script>
</head>
<body>

<script language="JavaScript1.1">
<!--
var photowidth = widthfind(photos[0].name); <<this function is returning 0 on initial load and is the method I posted in my original post
var photoheight = heightfind(photos[0].name);<< and now this one too!
//window.alert("Photos[0]" + photos[0]); << these are some of the windows I was using for debugging
//window.alert("photowidth" + photowidth);
//window.alert("photoheight" + photoheight);
createpage("Maintain radio silence", photos[0].name,photowidth,photoheight);


// -->



</script>
</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum