1

我正在尝试用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);


  }
4

1 回答 1

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" />

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

带预载：

无预载：

于 2018-07-15T07:26:18.433 回答