Jump to content



Photo

Javascript Image refresh


  • Please log in to reply
10 replies to this topic

#1 .AlleymaN

.AlleymaN

    Addict

  • Joined: 03-December 04

Posted 17 November 2006 - 12:52

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, 17 November 2006 - 16:03.



#2 kyosuken

kyosuken

    Old Geezer

  • Joined: 27-October 01

Posted 17 November 2006 - 14:16

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

#3 JoeC

JoeC

    Ooh, shiny stars

  • Joined: 30-November 05
  • Location: England

Posted 17 November 2006 - 15:53

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.

#4 OP .AlleymaN

.AlleymaN

    Addict

  • Joined: 03-December 04

Posted 17 November 2006 - 20:30

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, 17 November 2006 - 20:37.


#5 JoeC

JoeC

    Ooh, shiny stars

  • Joined: 30-November 05
  • Location: England

Posted 17 November 2006 - 23:05

Mmkay, ditch the last line of the Javascript, and amend the image code to
<img src="something.jpg" id="it" alt="Image" onload="reloadIt();" />

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.

#6 OP .AlleymaN

.AlleymaN

    Addict

  • Joined: 03-December 04

Posted 18 November 2006 - 05:49

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.

#7 vetKudos

Kudos

    Neowinian Senior

  • Joined: 19-October 04
  • Location: Ireland

Posted 19 November 2006 - 02:25

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


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.

#8 OP .AlleymaN

.AlleymaN

    Addict

  • Joined: 03-December 04

Posted 19 November 2006 - 03:49

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.

#9 Lilrich

Lilrich

    Apple Fan-Boi

  • Joined: 31-October 06

Posted 06 September 2012 - 07:55

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


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.

#10 BeerFan

BeerFan

    Neowinian Senior

  • Joined: 19-July 06

Posted 10 December 2012 - 02:52

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

#11 TheUberOverLord

TheUberOverLord

    Resident One Post Wonder

  • Joined: 29-March 14

Posted 29 March 2014 - 15:57

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/for...113.html#p43654

 

Don