Memory Leak When Loading Images With Javascript's Settimeout

I have set up a kind of surveillance system, where camera is taking a photo every second and sending this image to server where it overwrites the previous one. On a client side I h

Solution 1:

It could be a caching problem because the browser might cache all these images since they have new image names each time (this shouldn't case a crash though).

In this case, set these caching directives in the header and have a look if it fixes the problem:

<!-- disable caching on proxy servers -->
<meta http-equiv="pragma" content="no-cache">
<!-- set expiration date to "immediately" -->
<meta http-equiv="expires" content="0">
<!-- instruct the browser to not cache the webpage -->
<meta http-equiv="cache-control" content="no-cache" />

On the other hand what might be another problem is your javascript. If the server is not able to handle the http requests in time, you queue up a lot of unresolved http requests in the browser. Try setting the timeout to say 5 seconds (= 5000 ms) in this case.

A third possible solution might be to manipulate the image with plain javascript to eliminate the possibility of jQuery memory leaks.

// cache the element once
var img = document.querySelector("img");

// use in setTimeout (Don't create a new Time Object on every call):
img.src = "/image.jpg?randomString="+Date.now();