Приглашение Chrome отображается слишком быстро

Question

У меня есть код, который, когда я нажимаю кнопку, экран меняется с div видимость. В Edge , когда старый экран исчезает, загружается новый экран, а затем появляется приглашение. Однако в Chrome приглашение появляется до загрузки нового экрана и даже до исчезновения старого экрана. Я делаю тест на изображение, поэтому важно, чтобы новая страница (с изображением) отображалась до появления приглашения. Есть ли способ отложить приглашение Chrome?

Невозможно сначала загрузить всю страницу, потому что она напрямую завершит тест, как в цикле.

function classic() {
    document.getElementById('explain').style.display = "none";
    document.getElementById('game').style.display = "block";
    document.body.style.background = "grey";
    var quiz = [
        [1, 'Which country is this flag from?', 'netherlands'],
        [2, 'Which country is this flag from?', 'belgium'],
        [3, 'Which country is this flag from?', 'france'],
        [4, 'Which country is this flag from?', 'germany'],
        [5, 'Which country is this flag from?', 'united kingdom'],
        [6, 'Which country is this flag from?', 'italy'],
        [7, 'Which country is this flag from?', 'russia'],
        [8, 'Which country is this flag from?', 'norway'],
        [9, 'Which country is this flag from?', 'brazil'],
        [10, 'Which country is this flag from?', 'morocco'],
        [11, 'Which country is this flag from?', 'united states'],
        [12, 'Which country is this flag from?', 'kazakhstan'],
        [13, 'Which country is this flag from?', 'japan'],
        [14, 'Which country is this flag from?', 'argentina'],
        [15, 'Which country is this flag from?', 'portugal'],
        [16, 'Which country is this flag from?', 'luxembourg'],
        [17, 'Which country is this flag from?', 'mexico'],
        [18, 'Which country is this flag from?', 'china'],
        [19, 'Which country is this flag from?', 'egypt'],
        [20, 'Which country is this flag from?', 'nigeria']
    ];

    var nummer = 0;
    var answer;
    var response;
    var score = 0;
    for (var i = 0; i < quiz.length; i += 1) {
        nummer++
        document.getElementById('flag').src = "flags/flag" + nummer + ".png";
        answer = prompt(quiz[i][1]);

        if (answer === null) {
            window.alert("You cancelled the prompt. Please reload the page to play again.")
        }
        response = answer.toLowerCase();
        if (response === quiz[i][2]) {
            score++

Я хочу, чтобы приглашение отображалось после первого изображения ввикторина отображается.

Answer 1

Вы можете использовать setTimeout или устанавливать интервал до тех пор, пока элемент не станет видимым, а затем отобразить подсказку. Почти такой же ответ найден здесь

setTimeout(function(){ // Do your thing here e.g show promt 
}, 3000); // It will show promt after 3 seconds

И здесь установлено Интервал

var visibility= setInterval(function() {
   if ($('#element').length) {
      //Stop the interval when it is visible
      clearInterval(visibility);
   }
}, 300);

Answer 2

Это довольно просто, просто попробуйте это,

document.getElementById('flag').src = "flags/flag" + nummer + ".png";
document.getElementById('flag').onload = function() 
{ 
  answer = prompt(quiz[i][1]);
 }