2011-03-01 107 views
2

我使用Comet實時引擎,名爲APE,我使用jQuery刷新PHP圖像。起初,我加載圖像是這樣的:刷新圖像PHP和Javascript

<div id="container"> 
<img src="image.php" style='background: url(../assets/load.gif) no-repeat center center;margin-left:42px;' alt=' Loading ...' width="500px" height="300px" /> 
</div> 

,然後當我收到一個事件我這樣做:

$("#container").empty(); 
$("#container").html('<img src="image.php?device='+device+'" style="background: url(../assets/load.gif) no-repeat center center;margin-left:42px;" width="500px" height="300px" alt=" Loading ..."/>'); 

設備是我從事件接收無功,因此,例如我得到DEVICE1 ,一切工作正常(圖像實際上是一個圖表)和標題更改爲「設備1」,它繪製了最後5分鐘

但是,我的問題是每次我收到一個事件,在這個初始之後,日期仍然在同一個五分鐘期間。我的設備每次都是一樣的,但是在我的腳本里面,我計算了5分鐘前的當前時間,但是這個腳本似乎沒有更新圖像。它被緩存了嗎?

我已經在頁面的頂部使用這種嘗試:

<?php 
header("Cache-Control: no-cache, must-revalidate"); 
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT"); 
?> 

我可以等待約10分鐘,發送一個事件,而在時間段仍然是從最初的負荷,我認爲「空()「將清除容器,重新加載圖像並因此重新運行腳本。任何建議都會有幫助!

感謝

回答

7

一種常見的方法是一個簡單的VAR添加到擁有Unix時間戳查詢字符串;瀏覽器將每次通話視爲對獨特圖像的呼叫。例如

'image.php?device=' + device + '&t=' + Math.round((new Date()).getTime()/1000); 

因此它不認爲它有緩存的圖像。 (雖然它會繼續任何緩存策略導致此問題)

+0

謝謝!我認爲這可能是最有意義的 – 2011-03-01 04:59:04

+0

希望它解決了您的問題=) – Shad 2011-03-01 05:05:15

+0

請注意,此方法不會阻止緩存,但相反,當它重新加載頁面時,會使用盡可能多的版本填充客戶端緩存。這可能是好的,但重要的是要提醒它;-) – Capsule 2011-03-01 13:25:40

2

向圖像路徑添加一個額外的隨機變量。

$("#container").html('<img src="image.php?device='+device+'&rand='+(math.random * 1000000)+'" style="background: url(../assets/load.gif) no-repeat center center;margin-left:42px;" width="500px" height="300px" alt=" Loading ..."/>'); 

這將使它看起來像一個不同的URL,並導致瀏覽器不緩存。這與YUI使用的策略相同。

+0

非常感謝你們! – 2011-03-01 04:56:54