Properly Disposing Of Browser Resources

I have a web application which dynamically loads in data over a long period of time. Within the data there are links to images which are then rendered in the browser. e.g. var obje

Solution 1:

I would try using a custom binding, and create and destroy the images in that. I had a similar problem last year with an SVG, and that's what I had to do.

ko.bindingHandlers.createImage = {
    update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
    // Use something unique to identify this image objectvar imageName = viewModel.Name();
    var parent = bindingContext.$parent;

    var imageObject = parent.Images[imageName];

    if (imageObject) {
        $(element).empty()
        imageObject = null;
    }

    imageObject = $(element).append('<img src="' + viewModel.imgSrc() + '" />')[0];
    parent.Images[imageName] = imageObject;
    }
};

Here's recreating your original problem:

http://jsfiddle.net/manzanotti/ezb9e/5/

And here's my version:

http://jsfiddle.net/manzanotti/ezb9e/13/

Memory goes up initially, but it gets garbage collected every now and again, so it never gets out of control. This is tested in IE9 and Chrome.

Update Hmmm, I'm not now convinced that this completely fixes the problem in IE8. I've run the fiddle in sIEve, and the memory is going up still in that, though as sIEve adds hooks into DOM nodes, it could be a result of running it in sIEve. Chrome is definitely fine though, and IE9 seems, at the very least, to be a lot better, if not completely fixed.