在浏览器中通过setInterval显示多个图像非常慢

Question

我正在尝试使用javascript模拟硬币翻转。它会不断更改4个位置的图像，产生5秒钟翻转的印象，然后将源设置为“头部”图像或“尾部”图像。我在顶针mozilla中运行了它，它的工作原理非常完美，因此代码很好，但是在浏览器中运行时，更改图像的速度可能会非常慢。是因为图像大小还是其他原因？每张图片的大小约为150kb。

 function flipCoin() {

     let coins = ["euro_head.png" , "euro_head_45.png" , 
                 "euro_head_90.png" , "euro_tail.png"];
      var image = document.getElementById("coin");
      var i = 0;
      var toss = setInterval(function(){
      if(coins.length == i){i = 0;}
      else {image.src = coins[i++];}
    },50);

    setTimeout(function( ) { 
      clearInterval(toss); 
      image.src = Math.random() < 0.5 ? "euro_head.png" :  "euro_tail.png"; 
     }, 5000);


  } 

Answer 1

尝试像下面那样预加载图像（只需将它们放入coinImages数组中，应防止它们被垃圾回收）：

const coins = ["http://via.placeholder.com/50x50/00cc00?text=1", "http://via.placeholder.com/50x50/00b200?text=2",
  "http://via.placeholder.com/50x50/009900?text=3", "http://via.placeholder.com/50x50/007f00?text=4"
];
  
const coinImages = coins.map(src => {
  const img = new Image();
  img.src = src;
  return img;
});

function flipCoin() {
  const image = document.getElementById("coin");
  let i = 0;
  const toss = setInterval(function() {
    image.src = coins[i++ % coins.length];
  }, 50);

  setTimeout(function() {
    clearInterval(toss);
    image.src = Math.random() < 0.5 ? "http://via.placeholder.com/50x50?text=Heads" : "http://via.placeholder.com/50x50?text=Tails";
  }, 5000);


}

flipCoin();

<img id="coin" />

在这里，您可以看到以下效果：

预加载：

没有预加载：