Javascript Image refresh

November 17, 2006

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 November 17, 2006 by .AlleymaN

November 17, 2006

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

2,032 · November 17, 2006

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:

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

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

November 17, 2006

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 November 17, 2006 by .AlleymaN

2,032 · November 17, 2006

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.

November 18, 2006

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.

3,529 · November 19, 2006

&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="https://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="https://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.

November 19, 2006

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.

1,438 · September 6, 2012

&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="https://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="https://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.

2,922 · December 10, 2012

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

March 29, 2014

This does what you want using one line of HTML and includes error recovery and there is a working demo shown here:

http://foscam.us/forum/a-how-to-embed-any-foscam-ip-camera-in-webpage-using-1-line-t9113.html#p43654

Don

Sign In

Javascript Image refresh

Question

.AlleymaN

Link to comment

Share on other sites

10 answers to this question

Recommended Posts

kyosuken

Link to comment

Share on other sites

JoeC

Link to comment

Share on other sites

.AlleymaN

Link to comment

Share on other sites

JoeC

Link to comment

Share on other sites

.AlleymaN

Link to comment

Share on other sites

Kudos Veteran

Link to comment

Share on other sites

.AlleymaN

Link to comment

Share on other sites

Lilrich

Link to comment

Share on other sites

BeerFan

Link to comment

Share on other sites

TheUberOverLord

Link to comment

Share on other sites

Recently Browsing 0 members