I've been working on a code snippet to update a graph displayed on a Raspberry Pi periodically, but I'm running into memory issues. The limited memory of the Pi causes Chromium to crash due to memory overflow when updating the image. It seems like older images are not being properly cleared, leading to the memory leak. I attempted to use JavaScript to delete the old image and replace it with an updated one, but my solution didn't work as I expected. Since I'm not very experienced with JavaScript, I'm unsure if I made a rookie mistake in my implementation. Here's the code snippet:
<script type= "text/javascript">
var graph = "http://www.example.com";
function preload()
{
try
{
var buffer = new Image();
buffer.src = graph;
buffer.onload = function()
{
while (1)
{
setTimeout(preload, 1000);
document.getElementById('graph').src = buffer.src;
}
}
}
catch(err)
{
txt = "Error\n" + err.message;
alert(txt);
}
}
preload()
</script>
And the HTML for the image is:
<img src= "http://www.example.com" id=graph width=1015
height=275 frameborder="0" onload="preload()" style="display: block;
margin-left: auto; margin-right: auto;" align="bottom"/>