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比较陌生，而且我在这里有点笨拙，所以任何帮助都会非常感激。

我发现许多用于避免缓存图像的潜在解决方案包括将内容添加到图像网址中，例如日期或时间，但由于这已经是动态图像网址，因此我不确定如何使其工作。

提前感谢您的帮助。

Answer 1

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

我选择使用jquery来自动刷新一个包含抽搐状态的div，如下所示：

首先，在我的doc的标题中调用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中没有...任何人都有任何线索？我认为它可能是缓存页面 - 因为它看起来根本不是令人耳目一新的，因此脚本的第一部分在正文的末尾，但是没有做任何事情。再次，任何帮助将不胜感激。

使用jQuery刷新动态图像

1 个答案: