Javascript - really remove image

Question

A have a page with image.

Javascript code periodically loads new content for image from server as data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAUAAAADwCAYAAAB.... Well, you understand, it is image as base64 encoded.

Javascript code changes image src to new one, but it looks like old data is not being deleted.

If I leave page running for some time, it eats all the memory.

Is there some way to remove previous images completely?

The truth is that im passing with the same situation. So i decided to load the images inside a iframe :/ — Misters, Apr 24 '14 at 12:51

score 2 · Accepted Answer · edited May 23 '17 at 12:15

2

I have a suggestion. Please test and see if it works for you.

Create blob from base64 string. Read: Creating a Blob from a base64 string in JavaScript
var url = URL.createObjectURL(blob). And set the url as src of image
When done, try URL.revokeObjectURL(url)

edited May 23 '17 at 12:15

Community

1
1

answered Apr 24 '14 at 13:02

closure

7,412
1
23
23

1

Thank you, this helped. @Misters, check it out – Bogdan Burym Apr 24 '14 at 13:49

score 1 · Answer 2 · answered Apr 24 '14 at 13:08

If I understand you correctly, you are downloading the image as a base64 encoded string, then passing that string into an img src? If that is the case it sounds like the scope of your strings is not expiring somehow. To ensure the deletion of a primitive object like a string, you must keep a reference to the string by proxy with an object. Something like below.

// Somewhere in a persistent scope like global
image_reference = {};

// In your ajax callback
if(image_reference.data != null) {
delete image_reference.data;
}
image_reference['data'] = response.data;
// Put image_reference.data into your img element

Javascript - really remove image

2 Answers2