关键帧背景图像动画不使用预加载的图像

Question

我正在使用关键帧来创建幻灯片，但是幻灯片在第一次播放时并不流畅。在将动画播放状态更改为“正在运行”之前，我尝试通过JavaScript预加载图像，但是动画播放时图像仍会第二次加载。 在这里您可以看到hero_b.jpg加载了两次：

这是我的（简体）HTML

<span class="slideshow">
      <img src="hero_a.jpg" onload="preloadImages(this.parentElement, ['hero_b.jpg','hero_c.jpg'])">
</span>

这是我的（简化的）CSS

.slideshow {
    display: block;
    position: relative;
}

.slideshow:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: 100%;
    animation-duration: 8s;
    animation-name: desktop-pano;
    animation-iteration-count: infinite;
    animation-play-state: paused;
}

.slideshow.loaded:after {
    animation-play-state: running;
}

@keyframes desktop-pano {
      0% {
          background-image: url('hero_a.jpg');
      }
      25% {
          background-image: url('hero_b.jpg');
      }
      50% {
          background-image: url('hero_c.jpg');
                }
      100% {
          background-image: url('hero_a.jpg');
      }
 }

这是我的Javascript

function preloadImages(element, arr) {
    var newimages = [], loadedimages = 0
    var arr = (typeof arr != "object") ? [arr] : arr
    function imageLoaded() {
        loadedimages++;
        if (loadedimages == arr.length) {
            element.classList.add('loaded');
        }
    }
    for (var i = 0; i < arr.length; i++) {
        newimages[i] = new Image();
        newimages[i].onload = function () {
            imageLoaded();
        }
        newimages[i].src = arr[i];
    }
}

有人知道为什么动画没有使用预加载的图像吗？