Обновление динамических изображений с использованием jQuery

Question

Я пытаюсь создать список потоков twitch.tv, который вытаскивает онлайн/автономный статус каждые 60 секунд и возвращает изображение на основе этого ответа. Код php, который я использую, чтобы извлечь эту информацию и вернуть изображение, находится ниже:

<?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"); 
    } 
?> 

Эта часть работает нормально. Я звоню этот код (image.php) как так:

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

И все это работает, но это не жить. Я попробовал несколько вещей, чтобы обновить его и установить на jQuery, вероятно, лучший вариант. Я думаю, что мне нужно сделать некоторую комбинацию отправки информации заголовка, которая заставляет браузеры не кэшировать изображение и, возможно, поместить его в div, который jQuery обновляется каждые 60 секунд, но именно здесь я ударил по кирпичным стенам. Любые предложения о том, как это сделать? Я относительно новичок в jQuery и здесь немного пошатываюсь, поэтому любая помощь будет высоко оценена.

Многие потенциальные решения, которые я нашел для избежания кэшированных изображений, включают добавление вещей к URL-адресу изображения, например, дату или время, но поскольку это уже динамический URL-адрес изображения, я не уверен, как сделать эту работу ,

Заранее благодарим за любую помощь.

Answer 1

Хорошо, так что это может быть нечетным, чтобы ответить на мой собственный вопрос, но я нашел частичного решения проблемы я первоначально представленный:

Я пошел с идеей использования JQuery для автоматического обновления DIV, который имеет статус дергаться следующим образом:

во-первых, называется JQuery в заголовке моего Doc:

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

Затем, в нижней части секции тела файла:

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

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

И, наконец, вокруг кода с изображением в нем:

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

Итак моей нынешней проблемы? Он отлично работает в хроме, но не в IE или Firefox ... у кого-нибудь есть какие-то подсказки? Я думал, что это может быть кеширование страницы - потому что это, кажется, не освежает вообще, поэтому первая часть скрипта в конце тела, но это ничего не делало. Опять же, любая помощь будет высоко оценена.