如何使用连续的图像名称创建动画

Question

所以我有一张图片

<img id="animation" onload="initAnimation()" src='run-1.png'>

我想使用run-2.png，run-3.png等为图像设置动画。

var imageAnimation = document.getElementById('animation');
var images = ['run-1.png','run-2.png','run-3.png','run-4.png','run-5.png'];
var currentIteration = 0;


function initAnimation(){
  animate();
}

function animate(){
  for(i=0; i<images.length; i++){
      imageAnimation.src = images[i]
    }
    animate();
}

但是我似乎无法触发代码。您发现我的代码有什么问题吗？我的问题与检查图像何时完成加载不同，因为我需要遍历许多图像。