Javascript：点击时同时显示多张图片，图片之间没有延迟答案

【问题标题】：Javascript: Display multiple images at the exact same time on click, without lag between imagesJavascript：点击时同时显示多张图片，图片之间没有延迟
【发布时间】：2021-04-11 03:26:00
【问题描述】：

我还是编码新手，所以请记住这一点。我创建了一个游戏来练习我所学的东西，一切看起来都很好，直到我把它放到网上并意识到在玩游戏时加载图像有很大的延迟，特别是当玩家输掉或赢得一个关卡并且所有的门都意味着变成红色或绿色。在这里试试：

https://moniquejb.github.io/dodge-dat-door/

理想情况下，我希望图像在显示之前等待彼此加载，以消除滞后效应。或者也许有人可以提出更好的方法。如有必要，我的工作文件可在此处获得：

https://github.com/moniquejb/dodge-dat-door

谢谢！

【问题讨论】：

做一些关于“图像预加载器”之类的研究……

标签： javascript html css image dom

【解决方案1】：

您预加载它们。例如：制作一个图像文件数组

然后将其映射到一个元素或我为你制作的小sn-p的东西。

只需将所有图像文件添加到名为 imgs 的第一个数组中，然后它将进行加载，然后为您提供具有正确源等的 html img 元素数组。

let imgs = [
  "https://via.placeholder.com/150",
  "https://via.placeholder.com/150",
  "https://via.placeholder.com/150",
] //all files there

preload = async(images) => {

  let load = imgs.map(async a => {
    let img = new Image()
    img.src = a
    return await new Promise(res => {
      img.onload = () => res(img)
    })


  })


  const results = await Promise.all(load)

  console.log(results)
}

preload(imgs)

【讨论】：

感谢您的评论。在我的游戏中，显示的图像取决于用户点击的位置以及当时游戏其他部分的状态。因此，需要加载的图像几乎总是不同的，有时只有一个变化，有时四个变化。我正在努力弄清楚如何在这方面结合这种方法，有什么建议吗？再次感谢！