How to show Page Loading div until the page has finished loading with JavaScript?

Spread the love

To show Page Loading div until the page has finished loading with JavaScript, we set the display property of the loading div.

For instance, we write

<div id="loading">
  <img id="loading-image" src="img/loading.gif" alt="Loading..." />
</div>

to add a div with a loading image.

Then we write

window.onload = () => {
  document.getElementById("loading").style.display = "none";
};

to set window.onload to a function that selects the div with getElementById and hide it by setting style.display to 'none'.

window.onload is called when the page is loaded.

By John Au-Yeung