1

我试图让动态图像文件每 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 吗？

提前致谢

4

2 回答 2

0

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

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

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

于 2013-08-16T22:43:28.170 回答
0

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

在此处查看答案： 每页多个 GD 图像

于 2013-08-16T22:47:29.797 回答