我有一個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>
我很困惑,爲什麼你提出了一個涉及緩存氾濫的答案,因爲它似乎正是我最初的問題所在。我實際上更喜歡將一個圖像(或者過去的5或10張圖像)緩存起來,這樣,如果現有的緩存圖像等於新圖像,則不需要重新加載圖像。這可能嗎? – BSchlinker 2011-05-14 23:49:31
實現此目的的唯一方法是在過去提供無緩存或緩存過期時間的映像,以便下次您獲取它時,原始緩存副本將被覆蓋。但是,請注意,如果打開資源跟蹤,則正常的緩存規則不再適用:因爲您告訴它執行資源跟蹤,即使沒有緩存,它也會顯示此資源,因爲您表示希望查看所有內容,包括數據可能已被覆蓋。我會爲此使用一個imageservice腳本,如
", false)
});
相關問題