quru / image-defer Goto Github PK

It should be relatively simple to add support for the HTML5 srcset attribute, using that in preference to src when both are present, and if the browser supports it.

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.