Page resfresh w/setInterval() and images not loading

[okiiyama]

I'm running a slide show of sorts using setInterval() where after 10 seconds the page reloads with a new "slide".

The page loads two images. One is a backgound-image for a table (640x480px), and the other is an image in a table cell which gets dynamically resized using an onLoad() function. Occaisionally the image that gets resized does not appear on the page, even when that image has appeared before on a previous slide. I had tried calling the setInterval() function within the onLoad function that resizes the image, but then the page hangs. Could part of the problem of the image not loading be javascript related?

 

[trollacious]

Without seeing your code, it's hard to tell. It's possible to just change those items on the page without reloading the whole page, too, but we'd have to see what you have so far to know how to implement this with your code.

Lee

 

[kaht]

You'll also want to use setTimeout instead of setInterval. setInterval is used for something that you want to happen more than once, setTimeout is used for something that you only want to happen once - I know what you're thinking, you want the page to reload more than once. Well, when the page reloads, it restarts the timeout again. setInterval would be better used on your page for something like a countdown ticker or something ajax related that has to be constantly updated.

-kaht

http://www.silkypups.com

[small](All puppies have now found loving homes, thanks for all who showed interest)[/small]

 

[okiiyama]

Here is the javascript code that I'm using the JS is mixed with a little coldfusion as well:

	<script type="text/javascript">
		var super_interval = window.setInterval('pageReload()', 10000);
		function pageReload() {
			window.location = "default.cfm?officeid_param=<cfoutput>#officeid_param#</cfoutput>&rand_id=<cfoutput>#rand_id#&len=#listlen(session.mlsnumlist)#</cfoutput>";
		}
		function ImgResize(hasImg)
		{
			clearInterval(super_interval);
			window.setInterval('pageReload()', 8000);
			if(hasImg) {
				var img = document.getElementById("agentphoto");
				//img.width=img.width*.75;
				maxwidth=90;
				maxheight=180;
					
				oldimageheight=img.height;
				oldimagewidth=img.width;
				for (i=img.width; i>maxwidth; i--) {
					img.width=i;
					img.height=(i/oldimagewidth)*oldimageheight;
				}
				for (k=img.height; k>maxheight; k--) {
					img.height=k;
					img.width=(k/oldimageheight)*oldimagewidth;
				}
				img.width=img.width*.90;
			} else {
				
			}
		}
	</script>

ImgResize is called in the image onload:

<img id="agentphoto" src="#photourl#" style="border: 1px solid ##cc0000;" onLoad="ImgResize(true);">

 

[tsuji]

Try add a line inside the function see how it behaves. Load the image with a immaterial random element. (Not sure the exact syntax blend into cf, but you can figure out from the idea.)[tt]
//etc etc...
var img = document.getElementById("agentphoto");
[blue]img.src=<cfoutput>#photour1#</cfoutput>?(new Date()).getTime();[/blue]
//img.width=img.width*.75;
//etc etc...
[/tt]

 

[tsuji]

Upon re-reading what I posted, it looks incorrect due to my not familiar with cf. This looks more likely.
[tt] img.src=[red]"[/red]<cfoutput>#photour1#</cfoutput>?[red]"+[/red](new Date()).getTime();
[/tt]