How can i use [display = "none"] when javascript is disabled on client browser?

Question

How can i use this

document.getElementById("loader").style.display = "none";

when javascript is disabled on client browser? I added this w3school loading animation tutorial unto my site but it keep rotating when javascript is disabled on client browser and blocking the

<noscript>Sorry, your browser does not support JavaScript!</noscript>

Should i just create an image and just use z-index: 9999; to declare Sorry, your browser does not support JavaScript! or are they any alternative?

I created a demo page of it what it look like when you have javascript disabled and how it infinitely just rotating and blocking <noscript>. demo page here

Does this answer your question? [Embedding extra styles with noscript](https://stackoverflow.com/questions/218162/embedding-extra-styles-with-noscript) — DarkBee, Feb 18 '22 at 09:24

score 3 · Accepted Answer · answered Feb 18 '22 at 09:24

3

You can set it to display: none; by default, and show it through javascript, so if javascript is disabled, it would not show

answered Feb 18 '22 at 09:24

rosmak

545
1
12

Thanks this perfectly work also i set the whole HTML content too with `display: none; ` cuz whole content is run by `setTimeout` to show up so no javascript they won't see a thing except the ` – Emma Marshall Feb 18 '22 at 09:43

score 3 · Answer 2 · answered Feb 18 '22 at 09:27

Just add CSS into noscript tag:

<noscript>
  <style type="text/css">
    selector {
      display: none;
    }
  </style>
</noscript>

If you do the opposite by accessing styling through JS, you will encounter flickering / showing unnecessary elements before script is loaded and executed.

How can i use [display = "none"] when javascript is disabled on client browser?

2 Answers2