0

I have a simple HTML page with 

<img src="http://www.hamqsl.com/solar101pic.php">

And this image get an update every day

How can I make my page update this image every day or every 12 hours

The reason I want JavaScript to update it Cuz I use it in an HTML widget Which doesn't update it self

AbdAlWahab Fanr
  • 90
  • 1
  • 9

5 Answers5

1

As explained on this page, just use a cache breaker to reload your image :

const img = document.getElementById("myImage")

setInterval( () => {
   img.src = "http://www.hamqsl.com/solar101pic.php?" + new Date().getTime();
}, 1000*3600*12) // 12 hours in ms
<img id="myImage" src="http://www.hamqsl.com/solar101pic.php" />

By adding ?randomstuff after the URL, you force the browser to fetch a fresh copy of the file because it's not identified as being in the cache.

Jeremy Thille
  • 26,047
  • 12
  • 43
  • 63
0

Are you going to manually update the link for the image? Or does the "101" in the URL increment?

If the link is static, except for some kind of numeric integer, then I would use JavaScript to inject HTML onto your web page. Check:

var imgHtml = '<img src="http://www.hamqsl.com/solar101pic.php">';
document.getElementById('tag-id').innerHTML = imgHtml

You can use the Date.now() function to get the epoch time, and then play with MOD(%) to set a proper interval. This is how you get 12 hours. I'll leave it to you to find out.

Sedky A
  • 184
  • 2
  • 15
-1

setInterval(function() { location.reload(); }, 5000);

Update

i think your logic wont do the trick because the browser start the count when u open it so the image will change after 12 hours from opening it not at specific time so you have to options

  1. Set the Image Url On server Side
  2. assign an image to each hour on a clock
IbraHim M. Nada
  • 693
  • 6
  • 26
-1

window.location.reload(true) forces page reload without using the cached version. (MDN)

You can implement a timer this way:

setTimeout(function(){  
  window.location.reload(true);
},4.32e+7); // 12 hours refresh rate. This is the time, in milliseconds.

More info on setTimeout (MDN).

Jeff Noel
  • 7,500
  • 4
  • 40
  • 66
-1

You can use either Javascript's setTimeout function which will fire the event once it hits the specified timer (in milliseconds):

setTimeout(function(){
    window.location.reload(1);
}, 3600);

Or you can use the following meta tag (in seconds):

<meta http-equiv="refresh" content="3600" />

EDIT: Just thought of a better way. How about deleting the element using jQuery and then redrawing the element again?

Lewis Browne
  • 904
  • 7
  • 23
  • It's fairly poor UX to force a user to refresh their page. I wouldn't recommend either of these two solutions. – Richie Aug 01 '17 at 14:49
  • 1
    @Richie We're answering what the OP asks for. He's not asking for UX-elegant solutions, he's asking for us to refresh his page. – Jeff Noel Aug 01 '17 at 14:51
  • 1
    @JeffNoel he's not asking how to refresh his page, he is asking how to update an image. There are less obtrusive ways to do it. – Richie Aug 01 '17 at 14:53
  • 1
    OP wants to refresh an image, and 3 out of 4 solutions given here suggest to reload the whole page. Downvoted. – Jeremy Thille Aug 01 '17 at 15:00