Eliminate flickering during page load events when modifying existing DOM elements

Question

I have the following DOM element changing function using plain JavaScript, in which I use the page load event to change a span element containing some text string of the DOM.

With the following code, the DOM elements will change as expected. However, variables desktop and mobile will still see the minimal portion of the flickering before their DOM elements change.

Flash field%E

Answer 1

There are many reasons why it might flicker, but there are two precautions you can take:

• Use defer on script tags <script defer> as this allows the browser to handle the order in which scripts are run instead of using DOMContentLoaded. You can also avoid changes wrapper functions.
• Follow the suggestions in this question (and your own

Answer 2

In any case, you need to wait until the DOM is loaded before you can operate on it. Using an even listener with DOMContentLoaded would be the way to go. So, three things need to happen:

1. Waiting for DOM to load
2. Find elements and change text
3. Make the element visible. You can use the properties visibility:hidden or display:none. The difference is that