JS 运行后 DOM 加载图片

Question

我遇到了真正奇怪的问题。我有一个问四个问题的简单猜谜游戏。它接受用户输入并发出警报，将用户猜对或不正确打印到 DOM，然后显示图像（绿色复选框或红色 x），然后转到下一个问题。等等等等。

问题：游戏运行，将消息打印到 DOM，但直到整个游戏结束才显示图像。

奇怪的是 chrome 控制台清楚地显示 img 元素的 "src" 属性被正确修改（并且文件树被正确排列以访问图像）。相反，会出现一个空白框。当然，直到游戏结束。

我的 HTML 样例：

<p id="question1" class="rightAnswer" class="wrongAnswer"></p>
<img id="img1" src="" width="100">

JS 函数（IIFE）。每个问题都有一个函数，它们看起来都与这个相同：

var question1 = (function() {
  var userAnswer1 = prompt(arrayQuestions[0]);
  if((userAnswer1.toUpperCase() === "BOSTON") || (userAnswer1.toUpperCase() === "BOS")) {
    // inserts correct or incorrect message after user guesses
    document.getElementById('question1').innerHTML= arrayAnswerCorrect[0];
    // changes color of that message
    document.getElementById('question1').style.color = "green";
    // inserts image via 'src' attribute
    document.getElementById('img1').src = "images/correct.png";

    scoreIt++;
  } else {
    document.getElementById('question1').innerHTML = arrayAnswerIncorrect[0];
    document.getElementById('question1').style.color = "red";
    document.getElementById('img1').src = "images/incorrect.png";
  };
}());

提前谢谢你。这真是难倒我了。

Answer 1

问题和 DOM 更新在开始的单个代码块中，一次提出一个问题，最后一个问题后最终完成执行。

但是 javascript 个线程运行完成：一旦启动，在代码 returns 之前没有任何中断。提示只是阻塞 javascript 线程，直到用户输入信息。尽管浏览器在执行线程期间接受对 DOM 的修改，并且可能会在 DOM 元素属性中反映对 DOM 的更改，但它们通常会推迟重新呈现页面，直到脚本完成.

您将需要重新考虑如何按顺序提问，但是运行在开始下一个问题之前完成每个问题的代码。两种可能性是显而易见的：1) "next question" 按钮，以及 2) 研究使用 setTimeout 调用来调用下一个问题代码。祝你好运;-)

JS 运行后 DOM 加载图片

Images loading in the DOM after JS runs

javascript

image

src