Обновление динамических изображений с помощью 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, который содержит статус twitch:

Во-первых, называется jquery в заголовке моего документа:

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

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