Sign in to follow this  
Followers 0

Javascript Image refresh

By .AlleymaN, in Web Design & Programming

Recommended Posts

.AlleymaN    0
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

Share this post

Link to post
Share on other sites
kyosuken    6
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.

Share this post

Link to post
Share on other sites
JoeC    105
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.

Share this post

Link to post
Share on other sites
.AlleymaN    0
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

Share this post

Link to post
Share on other sites
JoeC    105
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.

Share this post

Link to post
Share on other sites
.AlleymaN    0
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.

Share this post

Link to post
Share on other sites
Kudos    51
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

Share this post

Link to post
Share on other sites
.AlleymaN    0
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.

Share this post

Link to post
Share on other sites
Lilrich    47
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.

Share this post

Link to post
Share on other sites
BeerFan    280
Posted

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

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  
Followers 0
Go To Topic Listing Web Design & Programming

  • Recently Browsing   0 members

    No registered users viewing this page.