使用 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 可能是最好的选择。我认为我需要做的是发送标题信息的某种组合，强制浏览器不缓存图像，并可能将其放入 jQuery 每 60 秒刷新一次的 div 中，但这是我遇到砖墙的地方。关于如何做到这一点的任何建议？我对 jQuery 比较陌生，在这里摸索了一下，所以任何帮助都将不胜感激。

我为避免缓存图像而发现的许多潜在解决方案包括在图像 url 上附加日期或时间等内容，但由于这已经是一个动态图像 url，我不知道如何使其工作。

提前感谢您的帮助。

Answer 1

好的，所以回答我自己的问题可能很奇怪，但是我找到了解决我最初提出的问题的部分：

我想到了使用 jquery 来自动刷新一个 div 保持抽搐状态如下：

首先，在我的文档标题中调用 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 中却不行……有人有线索吗？我认为它可能正在缓存页面 - 因为它似乎根本没有刷新，因此脚本的第一部分位于正文的末尾，但这并没有做任何事情。再次感谢任何帮助。