2011-05-14 48 views
1

我有一個HTML頁面,它從WebSocket獲取base64圖像數據,然後將其顯示給用戶。圖像被週期性地改變(一個新的base64圖像被推到套接字上),所以一個新圖像必須被解碼並顯示給用戶。Javascript沒有清理瀏覽器中的舊圖像

我目前的問題是,圖片更新後,似乎從來沒有從瀏覽器的內存中刪除以前的圖像。如果我查看Chrome的資源頁面,我可以看到所有圖像仍然位於瀏覽器內存中。如果圖像文件足夠大並且變化足夠快,則瀏覽器的內存將填滿它將崩潰的地步。

有關如何解決這個問題的任何想法?我已經粘貼了下面的代碼片段。

<html> 
<head> 
<title>Presenter</title> 

<style> 
html,body{font:normal 0.9em arial,helvetica;text-align:center;} 
#dynamicImage { margin:0px auto; } 
</style> 

<script type="text/javascript"> 
function handleMessage(data) { 
    switch(data.type) { 
     case 'imageUpdate':   
      // replace the image    
      $('#dynamicImage').attr({ 
       'src': "data:image/jpeg;base64," + data.image, 
      }); 
      break; 
    } 
} 
</script> 
</head> 

<body> 
<div id="dynamicImageWrapper"> 
    <img id="dynamicImage" src="./WhitePixel45w.jpg" /> 
</div> 
</body> 
</html> 

回答

1

有兩種方法解決此快速獲取 - 第一個依靠,你讓你的服務器發送的圖像與過去無緩存或緩存過期頭。這種方式重新加載圖像總是將其重新加載到緩存中,而不是僅從緩存中獲取而不檢查服務器的新版本。

另一個選項需要少得多的工作:不要讓image「image.jpg」,get image「image.jpg?t =」,因爲就瀏覽器而言,這是一個新的URL。

折衷是緩存溢出 - 第一種方法是乾淨的,但需要在服務器上擺弄,甚至可能需要您以服務器端語言編寫圖像服務腳本,該服務器端語言的唯一責任是發送圖像「nocache」或「過去的緩存過期」標題文本集。第二種方法可以立即實現,非常非常容易,但如果用戶在頁面上更新多次,則可能會填滿用戶的緩存。

+0

我很困惑,爲什麼你提出了一個涉及緩存氾濫的答案,因爲它似乎正是我最初的問題所在。我實際上更喜歡將一個圖像(或者過去的5或10張圖像)緩存起來,這樣,如果現有的緩存圖像等於新圖像,則不需要重新加載圖像。這可能嗎? – BSchlinker 2011-05-14 23:49:31