Reload just an image on a page at regular time intervals

windows

Guest
I have an HTML page which contains an image which I would like to reload on the page after a given interval of time. This necessary because the image is regularly uploaded to the site with new information.<br />
<br />
Is it possible to just reload the image rather than the whole page?<!--content-->Try this, it should reload the image every 5 minutes but I'm not sure whether it will work or not because the source of the image never actually changes. Also the browser might just pull the image from it's cache. I guess you'll just have to try it and see.<script type="text/javascript"><!--<br />
<br />
var mins=5;<br />
<br />
function reloadhello(){<br />
<br />
document.getElementById("hello").src=http://www.webdeveloper.com/forum/archive/index.php/"hello.gif";<br />
<br />
setTimeout("reloadhello()",(mins*60000))<br />
<br />
}<br />
<br />
//--></script><br />
<br />
</head><br />
<br />
<body><br />
<br />
<p><br />
<img src=http://www.webdeveloper.com/forum/archive/index.php/"hello.gif" alt="Hello!" id="hello"><br />
</p><!--content-->Thanks for your reply but that does not appear to work. If its cached how do you get around that without the user refreshing?<!--content-->Try this, it changes the src of the image and then immediately changes it to the right src. This means that the src does change so the script might work, if the image is taken from the cache I don't know how to get around that.<script type="text/javascript"><!--<br />
<br />
var mins=5;<br />
<br />
function reloadhello(){<br />
<br />
document.getElementById("hello").src=http://www.webdeveloper.com/forum/archive/index.php/"somethingelse.gif";<br />
document.getElementById("hello").src=http://www.webdeveloper.com/forum/archive/index.php/"hello.gif";<br />
<br />
setTimeout("reloadhello()",(mins*60000))<br />
<br />
}<br />
<br />
//--></script><br />
<br />
</head><br />
<br />
<body><br />
<br />
<p><br />
<img src=http://www.webdeveloper.com/forum/archive/index.php/"hello.gif" alt="Hello!" id="hello"><br />
</p><!--content-->Originally posted by Joe999 <br />
Thanks for your reply but that does not appear to work. If its cached how do you get around that without the user refreshing? If you have control of the server sending the image you can send it with headers indicating it shouldn't be cached or it's already expired.<!--content-->Ray326 thanks but can you show me the code that would be necessary for this?<br />
<br />
Lavalamp - sorry but that did not work either<br />
<br />
Joe999<!--content-->What kind of scripting do you have available to you on the server that serves up the images?<!--content-->Don't know the answer to that ray326. Have only used HTML and javascript at this stage. I assume it allows the standard types but will try and find out. HEre is the list <br />
Perl5 & PHP4<br />
JavaScript and Java Support<br />
FrontPage Extensions<br />
Custom Error Pages<br />
Private CGI Bin<br />
Server Side Includes<br />
<br />
Joe999<!--content-->since you have java support then I would just use an applet for this. I know java but not so much along the lines of applets so I can't be much help on how to make this. My java was ap style so we did not do much with gui, it was all prompt. Java applet is just how I would do it, I will let the others go on in how they were telling you how to do it.<!--content-->Good idea. Either a little applet or Javascript feeding an iframe are probably as good as anything and code for both may be readily available on the free code sites or from someone here.<!--content-->Originally posted by Joe999 <br />
If its cached how do you get around that without the user refreshing? document.getElementById('hello').src = 'http://www.webdeveloper.com/forum/archive/index.php/hello.gif?' + (new Date()).getTime();Should do the trick.<!--content-->fredmv thanks for your reply. Put your code in place of the equivalent line in lavalamp's code but still no luck. The image does not refresh. Are any values needed in the brackets of "new Date" or "getTime"?<br />
<br />
code now looks as follows<br />
<br />
<head><br />
<script type="text/javascript"><!--<br />
var mins=1;<br />
function reloadhello(){<br />
document.getElementById('hello').src='http://www.webdeveloper.com/forum/archive/index.php/somethingelse.gif';<br />
document.getElementById('hello').src='http://www.webdeveloper.com/forum/archive/index.php/hello.gif' + (new Date()).getTime();<br />
setTimeout('reloadhello()',(mins*10000))<br />
}<br />
//--></script><br />
</head><br />
<br />
<body><br />
<br />
<img src=http://www.webdeveloper.com/forum/archive/index.php/"hello.gif" alt="Hello!" id="hello"><br />
<br />
</body><!--content-->Try calling the function in the onload of the body. It looks to me like the code never gets fired to start the loop:<br />
<br />
<head><br />
<script type="text/javascript"><!--<br />
var mins=1;<br />
function reloadhello(){<br />
document.getElementById('hello').src='http://www.webdeveloper.com/forum/archive/index.php/somethingelse.gif';<br />
document.getElementById('hello').src='http://www.webdeveloper.com/forum/archive/index.php/hello.gif';<br />
setTimeout('reloadhello()',(mins*10000))<br />
}<br />
//--></script><br />
</head><br />
<br />
<body onLoad="javascript:reloadhello();"><br />
<br />
<img src=http://www.webdeveloper.com/forum/archive/index.php/"hello.gif" alt="Hello!" id="hello"><br />
<br />
</body><br />
<br />
<br />
You may want to use a blank image for the 'somethingelse.gif' just so the page doesn't jump/flicker when the image reloads.<!--content-->Thanks for your reply BaTTyKoda but that doesn't seem to work either.<br />
<br />
Any other ideas?<!--content-->OK, one more idea put the following right after the img tag:<br />
<br />
<script type="text/javascript"><!--<br />
reloadhello();<br />
//--></script><br />
<br />
<br />
That should start the cycle of reloading the image right after it loads.<br />
<br />
Also, there may have been a type in my code or maybe it was somehow reformatted. it should have been<br />
<body onLoad="javascript:reloadhello();"><br />
not<br />
<body onLoad="java script:reloadhello();"><br />
i.e. no space between java and script.<!--content-->OK, the code is being reformatted. what's the deal?<br />
"javascript" not "java script". OY!<!--content-->some sort of forum security, its annoying. I do not see the point of breaking up java and script.<!--content-->I do wonder why???<br />
<br />
url=javascript:alert(document.cookie)]Click here[/url<br />
<br />
Try this, it's my last ditch attempt:<!--content-->Thanks Again BaTTyKoda but still no luck with correct code. Still won't reload the image at a set interval of time.<!--content-->Thanks again Lavalamp. The code <body onload="reloadhello();" > seems to stop the image loading at all. Just get the alt tag messge showing.<!--content-->Oops, I missed off a ? from the end of the img src.<!--content-->Thanks again Lavalamp but still no luck. The <body onload="reloadhello();"> seems to stop the image loading at all. As above just get the hello! alt tag showing but no image!!<!--content-->Wow, deja vu.<br />
<br />
Seems to work fine for me.<br />
<br />
Download <!--more--> the attachment, the function runs every 15 seconds so if you switch the names of the images you shouldn't have to wait very long for them to change.<!--content-->Thanks lavalamp - yes your code works fine by itself. When I put it into my page though ti does'nt seem to work. Code attached<!--content-->It works fine.<br />
<br />
And by the waythat is propably the most over complicated page I have ever seen in my life! position:absolute everywhere.<!--content-->Thanks again lavalamp. Appreciate your efforts. Don't know why it doesn't work for me. I'm using ie6.0 and the image just does not display. Your zip file worked fine. Yes you are right about horrible code - straight out of a MS product!!!<!--content-->Surprise surprise, FP 2003?<br />
<br />
I tested in IE 6 and Firefox 0.8. If most of your visitors are like me, they won't stay on a page for very long, once I've read the content I'm off again. Is there really a need to regularly refresh this image?<!--content-->Found my mistake renamed a .jpg to a gif!!! so it wouldn't display.<br />
Not FP but out of MS Publisher so just as bad.<br />
<br />
Thanks again for all your help lavalamp and others<br />
Joe999<!--content-->Happy to help. :)<!--content-->
 
Back
Top