• 0

Javascript Image refresh

Asked by .AlleymaN,

 Share Followers 0

Question

.AlleymaN
Posted (edited)

Hi,

Ive been trying to make this webpage which refreshes one single image from the server every 'x' seconds. I have no knowledge of javascript so I used google to find something to suit my needs. The script I obtained works fine apart from the fact that sometimes it displays a blank image. (This happens more on my mobile device (Windows mobile IE) than laptop, most probably due to bandwidth issues.

Is there a way in JS to only display the image once the browser knows that the image has been completely downloaded and if it has not been completely downloaded, keep the last image displayed. Any help will be appreciated. Thank you.

Edited by .AlleymaN
Link to post
Share on other sites

10 answers to this question

Recommended Posts

  • 0
kyosuken
Posted

I think you can do it by using some javascript preloading/caching (mainly used with the old rollover method) this can be a start.

Link to post
Share on other sites
  • 0
JoeC
Posted

java script:

function reloadIt()
  {
  if (document.getElementById("it"))
	{
	document.getElementById("it").src = document.getElementById("it").src;
	setTimeout("reloadIt()", 5000);
	}
   else
	{
	setTimeout("reloadIt()", 5000);
	}
  }

window.onload = reloadIt();

Just change 5000 to the delay in milliseconds you want - 10000 would be 10 seconds delay.

HTML Image code:

<img src="something.jpg" id="it" alt="Image" />

And change the "something.jpg" to the source of the image.

Link to post
Share on other sites
  • 0
.AlleymaN
  • Author
Posted (edited)

Tried the script above, didnt work. For some reason it didnt even refresh the image. Tried placing the script both within the < head > and < body > tags with no luck. Is there anything else I should try?

Edit: IE gives me error on the same line as the window.onload function with the error "Not implemented". Tried Opera too, no luck.

Edited by .AlleymaN
Link to post
Share on other sites
  • 0
JoeC
Posted

Mmkay, ditch the last line of the Javascript, and amend the image code to

&lt;img src="something.jpg" id="it" alt="Image" onload="reloadIt();" /&gt;

Should work I think :s

BTW, for JS debugging, FF is by FAR the most useful. I use Opera as my browser of choice, but FF is much better for JS debugging IMO.

Link to post
Share on other sites
  • 0
.AlleymaN
  • Author
Posted

ooh bad stuff happening with this one.."Stack overflow at 0", this is IE7 btw...I'm gonna try out with FF soon, but if it worked with IE it would be a bonus...Haven't said it yet but thanks for the help you're putting in here.

Link to post
Share on other sites
  • 0
Kudos
  • Veteran
Posted 

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
&lt;script type="text/javascript"&gt;
refreshImage = function()
{
img = document.getElementById("cam");
img.src="http://ephratareview.com/cam/mainstate.jpg?rand=" + Math.random();
}
&lt;/script&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /&gt;
&lt;title&gt;Auto-Refresh&lt;/title&gt;
&lt;/head&gt;
&lt;body onload="window.setInterval(refreshImage, 1*1000);"&gt;
&lt;img src="http://ephratareview.com/cam/mainstate.jpg" id="cam" /&gt;
&lt;/body&gt;
&lt;/html&gt;

I just copy and pasted this from an answer I gave in an other thread. Hasn't been tested in IE7, but should be fine.

  • Like 1
Link to post
Share on other sites
  • 0
.AlleymaN
  • Author
Posted

Thanks Kudos, this script seems to hold pretty well...moreover my application also deals with a traffic cam :). Will test it on the mobile device later to see if it functions the same way as it does on the PC.

Link to post
Share on other sites
  • 0
Lilrich
Posted 

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
&lt;script type="text/javascript"&gt;
refreshImage = function()
{
img = document.getElementById("cam");
img.src="http://ephratareview.com/cam/mainstate.jpg?rand=" + Math.random();
}
&lt;/script&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /&gt;
&lt;title&gt;Auto-Refresh&lt;/title&gt;
&lt;/head&gt;
&lt;body onload="window.setInterval(refreshImage, 1*1000);"&gt;
&lt;img src="http://ephratareview.com/cam/mainstate.jpg" id="cam" /&gt;
&lt;/body&gt;
&lt;/html&gt;

I just copy and pasted this from an answer I gave in an other thread. Hasn't been tested in IE7, but should be fine.

This topic might be old but i just wanted to say thanks to Ahmadinejad for the code he provided i used it on a recent project and it worked as advertised.

Link to post
Share on other sites
  • 0
BeerFan
Posted

Also wanted to say thanks. Just used this code to update a page that displays a webcam at home. (Y)

Link to post
Share on other sites
This topic is now closed to further replies.
 Share
Followers 0
Go to question listing

  • Recently Browsing   0 members

    No registered users viewing this page.