在IndexedDB中保存图像时如何释放内存

Question

我在页面上没有图像并且如果它不存在则尝试将其保存在IndexDb中。 一切似乎工作正常，如果存在但图像看起来像浏览器内存泄漏，图像会立即加载。它会给一些混蛋并在某个时候挂起。我不知道如何处理，我写了一个看起来像这样的指令

 (function () {
            'use strict';

            // TODO: replace app with your module name
            angular.module('app').directive('imageLocal', imageLocal);

            imageLocal.$inject = ['$timeout', '$window', 'config', 'indexDb'];

            function imageLocal($timeout, $window, config, indexDb) {
                // Usage:
                // 
                // Creates:
                // 
                var directive = {
                    link: link,
                    restrict: 'A'
                };
                return directive;

                function link(scope, element, attrs) {

                    var imageId = attrs.imageLocal;
                    // Open a transaction to the database
                    var transaction;

                    $timeout(function () {
                        transaction = indexDb.db.transaction(["mystore"], "readwrite");
                        getImage();

                    }, 500);

                    function getImage() {

                        transaction.objectStore('mystore').get(imageId)
                            .onsuccess = function (event) {

                                var imgFile = event.target.result;

                                if (imgFile == undefined) {
                                    saveToDb(imgFile);
                                    return false;
                                }

                                showImage(imgFile);
                            }
                    }

                    function showImage(imgFile) {
                        console.log('getting');
                        // Get window.URL object
                        var url = $window.URL || $window.webkitURL;

                        // Create and revoke ObjectURL
                        var imageUrl = url.createObjectURL(imgFile);
                        element.css({
                            'background-image': 'url("' + imageUrl + '")',
                            'background-size': 'cover'
                        });


                    }

                    function saveToDb() {

                        // Create XHR
                        var xhr = new XMLHttpRequest(),
                        blob;

                        xhr.open("GET", config.remoteServiceName + '/image/' + imageId, true);
                        // Set the responseType to blob
                        xhr.responseType = "blob";

                        xhr.addEventListener("load", function () {
                            if (xhr.status === 200) {
                                console.log("Image retrieved");
                                // Blob as response
                                blob = xhr.response;
                                console.log("Blob:" + blob);

                                // Put the received blob into IndexedDB
                                putInDb(blob);
                            }
                        }, false);
                        // Send XHR
                        xhr.send();


                        function putInDb(blob) {

                            // Open a transaction to the database
                            transaction = indexDb.db.transaction(["mystore"], "readwrite");

                            // Put the blob into the database
                            var request = transaction.objectStore("mystore").add(blob, imageId); 
                            getImage();

                            request.onsuccess = function (event) {
                                console.log('saved');

                            }
                        };
                    }
                }
            }

        })();