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

Question

我正在尝试使用 javascript 模拟抛硬币。它会不断改变 4 个位置的图像，营造出翻转 5 秒的印象，然后将源设置为“头部”图像或“尾部”图像。我在 thimble 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" />

在这里，您可以看到以下性能:

有预加载:

没有预加载: