ZRender Memory leak due to non-existing image rendering

by kelvinau

HTML

<script src="https://cdn.rawgit.com/ecomfe/zrender/fdd60089/dist/zrender.js"></script>
<div>
Add breakpoint to <b>graphic/helper/image.js</b> see <b>globalImageCache</b>
</div>
<button onclick="addImage()">Add Image</button>
<button onclick="recreateZr()">Dispose ZR</button>
<div id="main"></div>
<div>Number of Images Added: <span id="status">1</span></div>

CSS

#main {
  width: 100%;
  height: 100%;
}

JavaScript

var zr = zrender.init(document.getElementById('main'));

var i = 0;
var image = new zrender.Image({
  position: [i * 20, i * 20],
  scale: [1, 1],
  style: {
    x: 0,
    y: 0,
    //image: 'test.png',
    image: 'avatar.png',
    width: 20,
    height: 20
  },
  draggable: true
});
zr.add(image);
i++;

function addImage() {
  var image = new zrender.Image({
    position: [i * 20, i * 20],
    scale: [1, 1],
    style: {
      x: 0,
      y: 0,
      //image: 'test.png',
      image: 'avatar.png',
      width: 20,
      height: 20
    },
    draggable: true
  });
  zr.add(image);
  i++;
  document.getElementById('status').innerText = i;
}

function recreateZr() {
  zr.dispose();
  zr = null;
  zr = zrender.init(document.getElementById('main'));
}