Categories
JavaScript Answers

How to make the browser wait to display the page until it’s fully loaded with JavaScript?

Spread the love

Sometimes, we want to make the browser wait to display the page until it’s fully loaded with JavaScript.

In this article, we’ll look at how to make the browser wait to display the page until it’s fully loaded with JavaScript.

How to make the browser wait to display the page until it’s fully loaded with JavaScript?

To make the browser wait to display the page until it’s fully loaded with JavaScript, we run our code in the window.onload method.

For instance, we write

body {
  opacity: 0;
}

to set the body element to have opacity 0 initially.

Then we write

window.onload = () => {
  setTimeout(() => {
    document.body.style.opacity = "100";
  }, 500);
};

to set window.onload to a function that calls setTimeout with a callback that sets the body’s opacity to 100 after 500 milliseconds.

Conclusion

To make the browser wait to display the page until it’s fully loaded with JavaScript, we run our code in the window.onload method.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *