Add many imageStatic Layers into map make browser's usage memory increase and browser slow down even crash

Question

I'm working on project with openlayer-3.

I want to display about hundreds of weather images on map with the same extent, each image will be presented for each time.

My idea is I created each Image layer for each image and add all them to map and just 1 of them is visible each time.

Map setting:

    var map = new ol.Map({
        target: 'map',
        layers: [
            new ol.layer.Tile({
                 source: new ol.source.OSM()
            });
        ],
        view: new ol.View({
            center: center,
            zoom: zoomLevel
        }),
        controls: ol.control.defaults({
            attributionOptions: ({
                collapsible: false
            })
        }),
        interactions: ol.interaction.defaults({
            mouseWheelZoom:false
        })
    });

Then I created Image layer for each image and add them to map

    var source = new ol.source.ImageStatic({
        url: imageLink,
        imageExtent: bounds,
    })
    layerName[layerIdx] = new ol.layer.Image({
        source: source,
        visible: true // false for which images not need to be visible 
    });
    map.addLayer(layerName[layerIdx]);

Problem occurs when I go through all layers (by using setVisible() to layers), I observe that the usage memory of browser (I check both Chrome and FireFox with latest version) is increasing quickly. I check with 1 hundred images and browser usage is nearly 10GB although image size is less than 1MB.

I also try removing redundant layers after display (using map.removeLayer(layerName[layerIdx])) but the memory does no reduce.

Hence, the browser get slowly and when I try on smartphone, it is crashed.

Any suggestion or solution is very appreciated.

Please let me know if something is unclear.

Update March 6th 2017: I tried with the new release openlayer-4, the issue is still there. Any idea is very appreciated.