Image Reload Help

myelecproject

04-04-2012, 02:20 AM

hello im working on my senior design project for my electrical engineering class. and part of the project is to upload an image via php (which ive written and it works great) but when the image is loaded into the same directory as the html file (which is supposed to display the image everytime a new image is uploaded) the image stays the same it doesnt show the new image. but i kno the new image has been uploaded because i can see it my web server. this is the code

<html>
<head>
<title>Human Cam</title>
<script type = "text/javascript">
function refresh() {
var refreshTime = 5*1000; //5000ms
var thisImage = "Lighthouse.jpg"; //the image location
var today = new Date(); //the current time
//add the time to the end of the image string
//to make a unique url:
document.images["pic"].src=thisImage+"?"+today;
//reload if the images are loaded:
if (document.images) {
window.onload=refresh;
}

//IF the time is up reload the image
t=setTimeout('refresh()', refreshTime);
}
</script>
</head>
<body onload="refresh()">
<center>
<h2>human cam</h2>
<img src="Lighthouse.jpg" id="pic">
</center>
</body>
</html>

Mishu

04-04-2012, 03:29 AM

try encoding the new date, otherwise the unencoded space after the day might not make the url unique until the day actually changes.

<p>
<img id="myPic" src="pic1.jpg" alt="" />
</p>

<script type="text/javascript">
window.onload=function() {
var currdate = new Date();
currdate = encodeURI(currdate.toString());
var imgO = document.getElementById('myPic').src += '?'+currdate;;
}
</script>

Logic Ali

04-04-2012, 03:43 AM

I concur with the previous reply, but it's more conventional to use the actual time value.

<html>
<head>
<title>Human Cam</title>
<script type = "text/javascript">

function refresh()
{
document.images["pic"].src = "Lighthouse.jpg" + "?" + new Date().getTime();

setTimeout('refresh()', 5000 );
}
</script>
</head>
<body onload="refresh()">
<center>
<h2>human cam</h2>
<img src="Lighthouse.jpg" id="pic">
</center>
</body>
</html>Also are you sure that the 'modified' timestamp on the server is as expected and that the case of the filename matches?

felgall

04-04-2012, 03:52 AM

The simplest alternative would be:

function refresh()
{
document.images["pic"].src = "Lighthouse.jpg" + "?" + new Date().getTime();
}
window.onload = function() {setInterval(refresh, 5000 )}