Browser bug: repeatedly changing image src causes a memory leak

[fozcode]

Amazingly, all the major browsers seem to suffer from a bug where repeatedly changing the src of an image, even just toggling it between 2 values, causes memory use to grow without bounds:

• Memory usage grows infinitely when changing img.src: https://bugs.chromium.org/p/chromium/issues/detail?id=114570
• Unbounded memory growth when adding and removing images: https://bugs.webkit.org/show_bug.cgi?id=31253
• IMG tag's SRC updation causing memory leaks: https://social.msdn.microsoft.com/Forums/ie/en-US/6ba039ec-8438-4225-ba7c-bad7e195a105/img-tags-src-updation-causing-memory-leaks?forum=iewebdevelopment

This bug renders image-defer's maxLoaded feature useless, and in fact image-defer just makes it worse when maxLoaded is in force, because it causes the src attributes to change more often than it otherwise would.

The issue is reproducible with the image-defer live demo page in latest Firefox 53 and Chrome 58. Just set the limit to 10 then repeatedly scroll up and down.

Given that the browser vendors haven't fixed this in 5 years, some kind of workaround will be needed. It might be possible, instead of just changing the src, to replace the image's DOM element with a clone of itself already set to the new src. The browser should then garbage collect the old DOM element along with the image data it contained. The DOM element in image-defer's _state.images will also need to be replaced.

[fozcode]

Changing the src by replacing the img with a clone looks to require something like this:

var clone = img.cloneNode(true);
clone.src = newsrc;
clone.addEventListener('load', clone._defer_load_event);  // if _defer_load_event exists
img.parentNode.replaceChild(clone, img);
// then replace img with clone in _state.images
// img should be garbage collected if there are no other references to it

Refs:
MDN clone
MSDN clone

Looks like it won't affect the existing browser compatibility.