为什么即使我更改了 src，图像也没有改变？答案

【问题标题】：Why are images not changing even though I changed the src?为什么即使我更改了 src，图像也没有改变？
【发布时间】：2021-06-25 05:15:12
【问题描述】：

我正在使用 HTML 和 JS 制作一个国际象棋游戏，用户可以在其中与计算机对战。每次移动后，每个方格的图像 src 都会更改以反映新位置。但是，当我在用户移动结束时调用计算机移动功能时，图像仅在两次移动完成后才会更新。我确保图像 src 确实发生了变化，但似乎只有在完成所有任务后才会加载新图像。以下是相关的简化代码：

        function changeImages(){ 
            for(var x = 0; x < 64; x++){
                    console.log("image changed")
                       //getImage is an array containing the URLs for different pieces
                       //allPositions is a global array of the current positions of the game
                    document.getElementById("img" + x).src = getImage[allPositions[x]];
            }
        }

        function pressed(clicked_id) {
                playerMove(clicked_id)
                changeImages()
                engineMove()
                changeImages()
        }

        function playerMove(clicked_id){
            //user's move
        }

        function engineMove(){
            //computer's move
        }

简而言之，有没有办法确保函数仅在图像更改后才执行？

【问题讨论】：

标签： javascript html

【解决方案1】：

是的，每个HTMLImageElement 都有一个从HTMLElement 继承的onload 事件，您可以将事件侦听器附加到该事件。您的代码可能如下所示：

function changeImages(callback){
  Promise.all(allPositions.map(position => {
    document.getElementById("img" + x).src = getImage[position];
    return new Promise(resolve => document.getElementById("img" + x).addEventListener('load', resolve, { once: true }));
  })).then(callback);
}

function pressed(clicked_id) {
  playerMove(clicked_id, engineMove)     
}

function playerMove(clicked_id, callback){
  //user's move
  changeImages(callback)
}

function engineMove(){
  //computer's move
  changeImages()
}

【讨论】：