使用 JQuery 或 Javascript 刷新图像

Question

我正在尝试让动态图像文件每 20 秒左右刷新一次，最好使用 JQuery/JS，但我愿意接受任何建议。

该图像是一个 Twitch.tv .php 文件，它会根据流媒体当前是否正在广播而从在线动态更改为离线。问题是图像有时在没有大量浏览器刷新的情况下不会更新，有时在我清除缓存之前它们根本不会更新。

我正在尝试执行此操作的网站是 http://www.team-omen.com/content.php 您将在中心看到一个名为 OmenTV 的模块，其中包含其中一些图像，我希望这些图像自动更新，这样用户就不必刷新页面来查看流媒体是否已开始广播。

这来自 status.php 文件，该文件确定要显示哪个 .png...

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

    ?>

这是显示图像的 HTML 文件部分

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

...等等

谁能给我一个如何让它工作的例子，比如有问题的图像的 ID 是 #status_teamomen ？

提前致谢

Answer 1

对于缓存问题，您可以在 url 中添加一个随机片段，这样每次 url 都不同，并且图像不会被浏览器缓存。

在此处查看答案： Multiple GD images per page

Answer 2

您可以使用 JavaScript 中的setInterval 函数定期更新图像源：

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

请注意使用 cache buster 查询字符串参数在每个请求上生成一个唯一的 URL，这将绕过任何浏览器对动态生成的图像的缓存。