Refreshing Image with JQuery or Javascript

Question

I'm trying to get a dynamic image file to refresh every 20 seconds or so, preferably with JQuery/JS but I am open to any suggestions.

The image is a Twitch.tv .php file that dynamically changes from ONLINE to OFFLINE depending on if the streamer is currently broadcasting or not. The problem is that the images don't update sometimes without a slew of browser refreshes, and sometimes they won't update at all until I clear the cache.

The website I'm trying to do this on is http://www.team-omen.com/content.php You will see in the center a module called OmenTV which has several of these images and I would like to have these automatically update so users don't have to refresh the page to see if the streamer has started broadcasting or not.

This is from the status.php file which determines which .png to display...

    <?php
header('content-type: image/png');

$stream = $_GET['stream'];

$json_file = @file_get_contents("http://api.justin.tv/api/stream/list.json?channel={$stream}", 0, null, null);
$json_array = json_decode($json_file, true);

if ($json_array[0]['name'] == "live_user_{$stream}") {
    echo file_get_contents("online.png");
}else{
    echo file_get_contents("offline.png");
}

    ?>

And here is the section of the HTML file that displays the images

    <div align="center" id="streamers">
    <div id="omentoggle" class="streamer">
    Team Omen
    <br />
    <img src="http://www.team-omen.com/status/streamstatus.php?stream=teamomen" class="status" id="status_teamomen" />
    </div> 
    <div id="briantitantoggle" class="streamer">
    BrianTitan
    <br />
    <img src="http://www.team-omen.com/status/streamstatus.php?stream=o_briantitan" class="status" id="status_briantitan"/>
    </div> 
    </div>

...and so on

Can someone give me an example of how to get this to work, say the image in question has an ID of #status_teamomen ?

Thanks in advance

Perhaps look at this question: http://stackoverflow.com/q/126772/1618257 — David Starkey, Aug 16 '13 at 22:45

score 0 · Accepted Answer · answered Aug 16 '13 at 22:43

0

You can use setInterval function in JavaScript to update the image source periodically:

setInterval(function() {
  var cache_buster = Math.random();
  document.getElementById("status_teamomen").src = "http://www.team-omen.com/status/streamstatus.php?stream=teamomen&cache_buster=" + cache_buster;
}, 20000);

Note the use of a cache buster querystring parameter to generate a unique URL on each request, which will bypass any browser caching of the dynamically generated images.

answered Aug 16 '13 at 22:43

leepowers

37,828
23
98
129

`random()` is not the same as `unique`. If you want something that will always be different, then use a timestamp. There will never be another 5:52 PM Aug, 16, 2013 ever again. – David Starkey Aug 16 '13 at 22:49
A timestamp is definitely more robust. Though the random() value should be "unique enough" for this situation. – leepowers Aug 16 '13 at 22:56
Make sure you also add `header('Cache-control: no-cache')` to your PHP file if you do this, or else you'll be stuffing the user's browser cache full of successive TV frames. (Or worse, some intermediate internet cache between user and server). – Doin Mar 15 '14 at 22:35

score 0 · Answer 2 · edited May 23 '17 at 12:28

0

For the cache problem you could add a random piece in the url so the url is different each time and the image wont get cached by the browser.

See the answer here: Multiple GD images per page

edited May 23 '17 at 12:28

Community

1
1

answered Aug 16 '13 at 22:47

user2140283

86
1
7

Refreshing Image with JQuery or Javascript

2 Answers2