cache causes Detached Node memory leaks

[wshaver]

After a day trying to figure out why I had so many detached elements in my page, I tracked it down to ImagesLoaded, specifically the cache. Because the cache keeps dom node references, it causes potentially hundreds of detached nodes on a dynamic page.

I'm looking at the cache and it contains dom elements that I no longer have on the page.

If I comment out the cache and do another profile, there are no detached dom nodes from the same set of actions.

This is somewhat related to #103 but that would force the user to manually clear the cache every time the page changes. Can we do it without retaining a reference to the DOM element?

[wshaver]

I've done a clunky work-around on my project that may help someone who finds this issue:

        var onImagesLoaded = function($el, callback){
            var ld = imagesLoaded($el);
            ld.off('always').on('always', function(){
                callback.apply(view, arguments, ld);
                _.each(ld.images, function(loadingImage, index){
                    loadingImage.img = {src:loadingImage.img.src};
                });
                ld.images = [];
                ld.elements = null;
                ld._events = null;
            });
            return ld;
        };

[desandro]

Thanks for digging into this! This is not good! 🐐

I've pushed an update that removes reference to any elements in cache. This should resolve it. 👯

Can I ask you to try out and verify?

[wshaver]

I've ended up moving away from your plugin and just manually checking the images that I needed to wait for loading on. I don't have an easy way of checking. Thanks for the reply and for open sourcing your project.

[desandro]

Closing as fixed.