• 0

Javascript Image refresh

Asked by .AlleymaN,

 Share

Question

Proficient

.AlleymaN

Posted
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 comment
https://www.neowin.net/forum/topic/513381-javascript-image-refresh/
Share on other sites

10 answers to this question

Recommended Posts

  • 0
Veteran

JoeC

Posted
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.

  • 0
Proficient

.AlleymaN

Posted
  • 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
  • 0
Veteran

JoeC

Posted
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.

  • 0
Grand Master

Kudos Veteran

Posted
  • Veteran
Posted 

&lt;!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&gt;
&lt;script type="text/javascript"&gt;
refreshImage = function()
{
img = document.getElementById("cam");
img.src="https://ephratareview.com/cam/mainstate.jpg?randMath.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.

  • 0
Mentor

Lilrich

Posted
Posted
  On 19/11/2006 at 02:25, Ahmadinejad said: 

&lt;!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&gt;
&lt;script type="text/javascript"&gt;
refreshImage = function()
{
img = document.getElementById("cam");
img.src="https://ephratareview.com/cam/mainstate.jpg?randMath.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.

This topic is now closed to further replies.
 Share
Go to question listing

  • Recently Browsing   0 members

    • No registered users viewing this page.

  • Posts

    • Notepad is losing its focus

      By tsupersonic · Posted

      That’s why I love classic Notepad from W10 IOT LTSC. It opens up instantly, uses very little resources, is just a plain notepad and nothing more. the title should be notepad has lost focus.
    • Notepad is losing its focus

      By dismuter · Posted

      Seeing my profile picture in Notepad creeped me out. I do not appreciate that Copilot is opt-out rather than opt-in. I don't want Notepad to have connectivity. The other improvements are fine, including the upcoming Markdown support (although I hate Markdown's handling of newlines with a passion).
    • Star Trek: Strange New Worlds (Paramount+)

      By theefool · Posted

      More like Trelane: https://memory-alpha.fandom.com/wiki/Trelane But, yes, Q.  
    • Astonishing new tech could kill headphones forever as it bends sound right into ears

      By fishnet37222 · Posted

      This would come in handy to me as an Uber driver. My biggest pet peeve is when passengers listen to their own audio on their phones without using headphones when they can hear I'm already playing music through my car's head unit.
    • Astonishing new tech could kill headphones forever as it bends sound right into ears

      By hellowalkman · Posted

      Astonishing new tech could kill headphones forever as it bends sound right into ears by Sayan Sen Imagine being able to listen to your favorite song or podcast out loud without disturbing anyone nearby even without wearing headphones. That’s what a team at Penn State University has been working on. Led by acoustics professor Yun Jing, they’ve come up with a clever way to create invisible audio zones called “audible enclaves” where sound can be heard only at one exact spot. They use ultrasound, which is normally inaudible to people, along with something called acoustic metasurfaces—tiny lenses that can bend sound in specific directions. By combining two ultrasound beams that travel in curved paths and meet at a single point, they’re able to make sound audible only at that intersection. As Jing explained, “The person standing at that point can hear sound, while anyone standing nearby would not. This creates a privacy barrier between people for private listening.” To make this happen, the system includes two ultrasonic speakers and the metasurface lenses, which were 3D printed by Xiaoxing Xia from Lawrence Livermore National Lab. Each beam has a slightly different frequency, and when they meet, a local reaction makes the sound audible. Neither beam is loud on its own—the sound only forms at that shared point. Jia-Xin “Jay” Zhong, one of the researchers, shared how they tested the idea: “We used a simulated head and torso dummy with microphones inside its ears to mimic what a human being hears at points along the ultrasonic beam trajectory, as well as a third microphone to scan the area of intersection. We confirmed that sound was not audible except at the point of intersection, which creates what we call an enclave.” One of the biggest advantages of their approach is that it works across a wide range of sound frequencies—between 125 Hz and 4 kHz, which covers most of what people can hears. Even in rooms where sound usually bounces around, their system held up well. And it’s surprisingly compact too: the whole setup measures about 16 centimeters, roughly the size of a pencil case. “We essentially created a virtual headset,” Zhong said. In practice, it means that someone standing in the audible enclave can hear what’s being played clearly, while everyone else around hears nothing at all. That could be especially useful in shared spaces like cars, classrooms, or open offices. Right now, the sound can travel about one meter and hits around 60 decibels which is similar to regular talking volume. The team believes they can push those limits further by using stronger ultrasound. All this might seem futuristic, but it’s grounded in solving a basic problem: how to direct sound only where it’s needed. If you’re into tech and sound design, this could open up a whole new world of personalized audio experiences. Source: Penn State, PNAS | Image via Depositphotos This article was generated with some help from AI and reviewed by an editor. Under Section 107 of the Copyright Act 1976, this material is used for the purpose of news reporting. Fair use is a use permitted by copyright statute that might otherwise be infringing.

  • Recent Achievements

    • First Post
      leoniDAM earned a badge
      First Post
    • Reacting Well
      Ian_ earned a badge
      Reacting Well
    • One Month Later
      Ian_ earned a badge
      One Month Later
    • Dedicated
      MacDaddyAz earned a badge
      Dedicated
    • Explorer
      cekicen went up a rank
      Explorer

  • Popular Contributors

    1. 1
      +primortal
      504
    2. 2
      ATLien_0
      211
    3. 3
      Michael Scrip
      197
    4. 4
      Xenon
      149
    5. 5
      +FloatingFatMan
      125
    Show More

  • Tell a friend

    Love Neowin? Tell a friend!