Welcome Guest! To access all forums & features, please register an account or sign-in. → Why register?


Australian Police trial Liberator plans in Back Page News

Javascript Image refresh

Started by .AlleymaN, Nov 17 2006 12:52

9 replies to this topic - - - - -

#1 .AlleymaN

    Addict

  • 759 posts
    • 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.

Ad Bot


#2 kyosuken

    Old Geezer

  • 378 posts
    • 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

    Ooh, shiny stars

  • 1,888 posts
    • 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

    Addict

  • 759 posts
    • 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

    Ooh, shiny stars

  • 1,888 posts
    • 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

    Addict

  • 759 posts
    • 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 vetIran Man

    Formerly Kudos

  • 3,433 posts
    • 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

    Addict

  • 759 posts
    • 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

    Apple Fan-Boi

  • 1,412 posts
    • Joined: 31-October 06

Posted 06 September 2012 - 07:55

View PostAhmadinejad, on 19 November 2006 - 02:25, said:

<!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 osuwildlifer

    Neowinian Wise One

  • 2,586 posts
    • Joined: 19-July 06
  • Location: Republic of Nunya!
  • OS: Windows 7 Ultimate 64Bit

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)
Back to Web Design / Programming · Next Unread Topic →


  1. Quick Nav
  2. Neowin Forums
  3. → Technical Help & Support
  4. → Web Design / Programming