Javascript Loading display

Question

I want to make a javascript program to activate something which requires some time to compute a animated screen pop ups while computing/loading. My Problem is I don't know how to achieve this in JS using async code. I have my approaches like this on where I just created a element into the website via javascript animated via CSS and when the computation was finished closed via javascript, but nothing happened. The idea was kind of like this:

document.getElementById("BTN").addEventListener("click",async function(){
  document.getElementById("example").style.display = "block";
  //Some Computing... 
  document.getElementById("example").style.display = "none";
  });

#example{
display: none;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id = "example">Lädt</div>
  <button id = "BTN">Button</button>
</body>
</html>

So what is wrong with this approach?

It seems fine what error you are getting

Amit Sharma
– Amit Sharma

2020-01-02 00:57:00 +00:00
Commented Jan 2, 2020 at 0:57 — Amit Sharma
– Amit Sharma, Commented Jan 2, 2020 at 0:57

snwflk · Accepted Answer · 2020-01-02 00:59:45Z

1

It's likely that your entire code block is executed in one go, including setting the loading element visible and invisible afterwards, without giving the browser time to actually update the rendered page to show the loading element.

One way to modify your code would be:

document.getElementById("BTN").addEventListener("click",async function(){
  document.getElementById("example").style.display = "block";

  setTimeout(function() {
    //Some Computing... 
    document.getElementById("example").style.display = "none";
  }, 0);

  });

This should allow the browser to update the page before going into the computation.

answered Jan 2, 2020 at 0:59

snwflk

3,5674 gold badges27 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Kilian Koch Over a year ago

Thank you very much, this works for the display Part! The other problem is now that the animation freeze while computing, do I have to do the animation now by JS or is there a way to still use css?

snwflk Over a year ago

I have too little info to go on & would suggest opening a new question with some actual code and animation that freezes up.

Jacob · Accepted Answer · 2020-01-02 01:06:05Z

You should access after loading window.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script>
    window.onload = function(){
      document.getElementById("BTN").addEventListener("click",async function(){
      document.getElementById("example").style.display = "block";
      //Some Computing... 
      document.getElementById("example").style.display = "none";
      })
    };
  </script>
</head>
<body>
  <div id = "example">Lädt</div>
  <button id = "BTN">Button</button>
</body>

</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>

</head>
<body>
  <div id = "example">Lädt</div>
  <button id = "BTN">Button</button>
</body>
  <script>
    document.getElementById("BTN").addEventListener("click",async function(){
    document.getElementById("example").style.display = "block";
    //Some Computing... 
    document.getElementById("example").style.display = "none";
  })
  </script>
</html>

Collectives™ on Stack Overflow

Javascript Loading display

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related