Refreshing Dynamic Images Using jQuery

Question

I'm trying to create a list of twitch.tv streams that pulls online/offline status every 60 seconds and returns an image based upon that response. The php code I'm using to pull this information and return the image is below:

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

    $stream = $_GET['stream'];

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

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

This part works fine. I'm calling this code (image.php) like so:

<img src="image.php?stream=nameofstreamgoeshere" />

And it all works, but it's not live. I have tried several things to make it refresh and settled on jQuery likely being the best option. I think what I need to do is some combination of sending header information that forces browsers not to cache the image and perhaps place it into a div that jQuery refreshes every 60 seconds, but this is where I've hit brick walls. Any suggestions on how to do this? I'm relatively new to jQuery and am fumbling around a bit here, so any help would be much appreciated.

A lot of the potential solutions I've found for avoiding cached images include appending things to the image url like the date or time, but since this is already a dynamic image url I'm not sure how to make that work.

Thanks in advance for any help.

Do you get a proper response from the justin.tv service? So, it's your file that is being cached? — Leite, Jun 20 '13 at 16:01
yes! I'm getting a good response from justin.tv - they allow pulling status information once every 60 seconds. I believe it is my online.png or offline.png files that are being cached. — billhinz, Jun 20 '13 at 18:41

score 0 · Answer 1 · answered Jun 21 '13 at 02:37

0

Okay, so it may be odd to answer my own question, however I have found a partial solution to the problem I originally presented:

I went with the idea of using jquery to auto-refresh a div that holds the twitch status as follows:

First, called jquery in the header of my doc:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js">

Then, at the bottom of the body section of the file:

<script>
$.ajaxSetup ({
    // Disable caching of AJAX responses */
    cache: false
});

var auto_refresh = setInterval(
function()
{
$('#twitchStatus').fadeOut(0).load('reload.php').fadeIn(0);
}, 60000);
</script>

And finally, around the code with the image in it:

<div id="twitchStatus">
nameofstreamgoeshere is <img style="margin-bottom: 0px;" alt="" src="image.php?stream=nameofstreamgoeshere" />
</div>

So my current problem? It works perfectly in chrome, but not in IE or Firefox... anyone got any leads? I thought it might be caching the page - because it does not appear to be refreshing at all, hence the first part of the script at the end of the body, but that didn't do anything. Again, any help would be much appreciated.

answered Jun 21 '13 at 02:37

billhinz

11
1

I changed the fadeOut/fadeIn variable to "slow" on both to see if it was refreshing properly and it is actually refreshing in IE/Firefox, but still not updated the image. I still think it's a caching issue... I've tried putting in the anti-caching header information in the image.php file to no avail. Still working... – billhinz Jun 21 '13 at 02:59
Try to call your reload.php with a timestamp, like `.load("reload.php?d=123456")`, if that doesn't work, check the PHP docs about headers, there should be one you can use in your script, that allows you to tell the browser not to cache the content. – Leite Jun 24 '13 at 10:50
@Leite - thanks for the suggestions, but I'm still not getting anywhere with IE. I have added in a bunch of PHP header information to prevent caching in the image.php file and in the reload.php file, and added a timestamp to the .load function as you mentioned. I'm starting to wonder if it is not a caching issue at all... is there anything else that would prevent this script from working? – billhinz Jun 25 '13 at 16:48
There is one `cache` option in `$.ajax` that has the default of `true`. Since you are using `$.load`, maybe you could check `$.ajaxPrefilter` (http://api.jquery.com/jQuery.ajaxPrefilter/) and see if you can change that option there, might be it. – Leite Jun 26 '13 at 14:07

Refreshing Dynamic Images Using jQuery

1 Answers1