Chrome prompt appears too fast

Question

I have a code that when I press a button, the screen changes with div visibility. In Edge, once the old screen disappears, the new screen loads and then a prompt appears. However, in Chrome, the prompt appears before the new screen is loaded and even before the old screen has disappeared. I am making a picture quiz so it is important that the new page (with the picture) displays before the prompt. Is there any way to delay the Chrome prompt?

It is not possible to load the entire page first because it will directly end the quiz as it is in a loop.

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++

I want the prompt to display after the first picture in the quiz is displayed.

Just for info `window.alert` is the same as just `alert`. It's a shorthand to `window.alert`. — Rumplin, Oct 01 '19 at 07:35
It looks like you want to wait until the image is loaded, take a look at: https://stackoverflow.com/questions/12354865/image-onload-event-and-browser-cache — Titus, Oct 01 '19 at 07:44

George Stavrou · Answer 1 · 2019-10-01T07:39:24.650

You can use a setTimeout or set Interval until element is visible then display the prompt. Almost same answer found here

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

And here is set Interval

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

score 0 · Answer 2 · answered Oct 01 '19 at 08:01

0

Its quite simple, Just try this,

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

answered Oct 01 '19 at 08:01

Muhammad Hamza Mirza

52
7

Chrome prompt appears too fast

2 Answers2