HTML 5 Canvas图像序列加载缓慢

Question

我有一个Range滑块，它控制绘制到画布上的图像序列。我没有想到的一件事是，图像在滑块的每个步骤上都被绘制到画布上，这意味着图像每次都加载并且全部模糊。当前正在将图像加载到数组中，但是是否有一种方法可以将它们加载到页面上，这样就可以引用它们而不必每次都加载它们？我不确定按比例缩小图像是否会有所帮助。我附上了我正在使用的当前代码。

 var canvas = document.getElementById("canvas");
 	

    var totalImages = 50;
    var videoFrames = [];
    for (var i = 1; i <= totalImages; i++) {
      var videoFrame = new Image;
      var videoFrameUrl = 'http://dacwebdesign.com/testing/images/timelapse-' + i + '.jpg';

      videoFrame.src = videoFrameUrl;
      videoFrames.push(videoFrame);
	}

  $("#my-input").on("input", function(event) {
    var currentImage = videoFrames[event.target.value - 1];
    var context = canvas.getContext("2d");
    var dstWidth = canvas.width;
	var dstHeight = canvas.height;
    var srcWidth = currentImage.naturalWidth;
	var srcHeight = currentImage.naturalHeight;
    context.drawImage(currentImage, 0, 0, srcWidth, srcHeight, 0, 0, dstWidth, dstHeight)
  });

canvas {
    width: 100%;
    height:100%;
    border: 1px solid black;
    background-size: 100% 100%;
    background-image: url("http://www.dacwebdesign.com/testing/images/timelapse-1.jpg");
  }
input[type=range] {
  -webkit-appearance: none;
  margin: 10px 0;
  width: 100%;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 12.8px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  background: #2176ff;
  border-radius: 25px;
  border: 0px solid #000101;
}
input[type=range]::-webkit-slider-thumb {
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  border: 0px solid #000000;
  height: 20px;
  width: 39px;
  border-radius: 7px;
  background: #303745;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -3.6px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background-color: rgba(50,54,67,0.6);
}
input[type=range]::-moz-range-track {
  width: 100%;
  height: 12.8px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  background: #ac51b5;
  border-radius: 25px;
  border: 0px solid #000101;
}
input[type=range]::-moz-range-thumb {
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  border: 0px solid #000000;
  height: 20px;
  width: 39px;
  border-radius: 7px;
  background: #65001c;
  cursor: pointer;
}
input[type=range]::-ms-track {
  width: 100%;
  height: 12.8px;
  cursor: pointer;
  animate: 0.2s;
  background: transparent;
  border-color: transparent;
  border-width: 39px 0;
  color: transparent;
}
input[type=range]::-ms-fill-lower {
  background: #ac51b5;
  border: 0px solid #000101;
  border-radius: 50px;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
}
input[type=range]::-ms-fill-upper {
  background: #ac51b5;
  border: 0px solid #000101;
  border-radius: 50px;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
}
input[type=range]::-ms-thumb {
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  border: 0px solid #000000;
  height: 20px;
  width: 39px;
  border-radius: 7px;
  background: #65001c;
  cursor: pointer;
}
input[type=range]:focus::-ms-fill-lower {
  background: #ac51b5;
}
input[type=range]:focus::-ms-fill-upper {
  background: #ac51b5;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="canvas"></canvas>
<input id="my-input" type="range" min="1" max="50" value="1">