使用jQuery刷新動態圖像

我正在嘗試創建一個twitch.tv流的列表，每隔60秒提取一次在線/離線狀態並返回基於該響應的圖像。我用來提取這些信息並返回圖像的php代碼如下：使用jQuery刷新動態圖像

<?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，並且在這裏摸索一點，所以任何幫助將非常感激。

我發現的避免緩存圖像的很多潛在解決方案包括將圖像網址附加到日期或時間之類的東西，但由於這已經是一個動態圖像網址，我不確定如何使其工作。

在此先感謝您的幫助。

來源

2013-06-20 billhinz

您是否從justin.tv服務獲得了正確的回覆？那麼，這是你的文件被緩存？ – Leite

是的！我從justin.tv獲得了很好的迴應 - 他們允許每60秒提取一次狀態信息。我相信這是我正在緩存的online.png或offline.png文件。 – billhinz

好了，所以它可能會奇怪，回答我的問題，但我已經找到了部分解決我原先提出的問題：

我使用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中......任何人都得到任何線索？我認爲它可能會緩存頁面 - 因爲它看起來並不令人耳目一新，因此腳本的第一部分位於本體的末尾，但那沒有任何作用。再次，任何幫助將不勝感激。

來源

2013-06-21 02:37:15 billhinz

我將fadeOut/fadeIn變量更改爲「慢」，以查看它是否正確刷新，並且實際上在IE/Firefox中刷新，但仍未更新圖像。我仍然認爲這是一個緩存問題......我已經嘗試在image.php文件中放入反緩存頭信息無濟於事。仍在工作... – billhinz

嘗試使用時間戳調用reload.php，比如'.load（「reload.php？d = 123456」）'，如果這樣不起作用，請檢查有關標題的PHP文檔，應該是您可以在腳本中使用的一種，它允許您告訴瀏覽器不要緩存內容。 – Leite

@Leite - 感謝您的建議，但我仍然無法使用IE。我添加了一堆PHP頭信息，以防止在image.php文件和reload.php文件中進行緩存，併爲.load函數添加了時間戳，如您所述。我開始懷疑這是不是一個緩存問題......還有什麼會阻止這個腳本的工作？ – billhinz

使用jQuery刷新動態圖像

回答

相關問題