Conceal the content until it has completed loading

Question

Conceal the content until it has completed loading

I attempted to develop a code that would hide my page until it has fully loaded. However, the code I created did not produce the desired outcome. Instead of hiding the BODY element until the OnLoad event occurred, it remained hidden at all times.

If anyone could provide assistance and suggest a more effective method for concealing the BODY while it loads or identify what is wrong with the current approach, it would be greatly appreciated.

This is what I have experimented with so far:

function unveil() {
  var thebod = document.getElementById("testbody");
  thebod.STYLE = "display: block;"
}

<HTML>

<HEAD>
  <TITLE>HELLO</TITLE>
</HEAD>

<BODY ID="testbody" ONLOAD="unveil();" STYLE="display: none;">
  <div align="CENTER">
    HELLO WORLD!
  </div>
</BODY>

</HTML>

javascript html css onload

Answer 1

Answer №1

To achieve this, utilize the DOMContentLoaded event associated with the window object. However, it is recommended to hide a wrapper element instead of directly manipulating the body. Additionally, ensure that when modifying the style, you target specific CSS properties rather than the entire style object.

window.addEventListener("DOMContentLoaded", function(){
  document.getElementById("wrapper").style.display = "block";
});

#wrapper { text-align:center; background:#e0e0e0; display:none;}

<HTML>

<HEAD>
  <TITLE>HELLO</TITLE>
</HEAD>

<BODY>
  <div id="wrapper">
    HELLO WORLD!
    
    <!-- The following is only added to create a delay in the 
         parsing of the document -->
    <script>
      for(var i = 0; i < 100000000; ++i){ var x = i / 3.14; }
    </script>  
  </div>
</BODY>

</HTML>

Answer 2

To achieve this, utilize the DOMContentLoaded event associated with the window object. However, it is recommended to hide a wrapper element instead of directly manipulating the body. Additionally, ensure that when modifying the style, you target specific CSS properties rather than the entire style object.

window.addEventListener("DOMContentLoaded", function(){
  document.getElementById("wrapper").style.display = "block";
});

#wrapper { text-align:center; background:#e0e0e0; display:none;}

<HTML>

<HEAD>
  <TITLE>HELLO</TITLE>
</HEAD>

<BODY>
  <div id="wrapper">
    HELLO WORLD!
    
    <!-- The following is only added to create a delay in the 
         parsing of the document -->
    <script>
      for(var i = 0; i < 100000000; ++i){ var x = i / 3.14; }
    </script>  
  </div>
</BODY>

</HTML>

Answer 3

Answer №2

The proper way to set the style of elements is essential:

You have two options:

element.style.display = "block";

Alternatively, you can use this method:

element.setAttribute('style', "display: block");

Here's a functional demonstration:

function reveal() {
  var body = document.getElementById("exampleBody");
  body.style.display = "block";
}

<HTML>

<HEAD>
  <TITLE>GREETINGS</TITLE>
</HEAD>

<BODY ID="exampleBody" ONLOAD="reveal();" STYLE="display: none;">
  <div align="CENTER">
    GREETINGS WORLD!
  </div>
</BODY>

</HTML>

Answer 4

The proper way to set the style of elements is essential:

You have two options:

element.style.display = "block";

Alternatively, you can use this method:

element.setAttribute('style', "display: block");

Here's a functional demonstration:

function reveal() {
  var body = document.getElementById("exampleBody");
  body.style.display = "block";
}

<HTML>

<HEAD>
  <TITLE>GREETINGS</TITLE>
</HEAD>

<BODY ID="exampleBody" ONLOAD="reveal();" STYLE="display: none;">
  <div align="CENTER">
    GREETINGS WORLD!
  </div>
</BODY>

</HTML>

Answer 5

Answer №3

Your error lies in this section:

thebod.STYLE = "display: block;"

The correct syntax should be:

thebod.style.display = 'block';

Below is a comprehensive solution using unobtrusive javascript:

var body = document.getElementsByTagName('body')[0];

function reveal() {
    body.style.display = 'block';
}

window.addEventListener('load', reveal, false);

body {
display: none;
}

div {
text-align: center;
}

<div>HELLO WORLD!</div>

Answer 6

Your error lies in this section:

thebod.STYLE = "display: block;"

The correct syntax should be:

thebod.style.display = 'block';

Below is a comprehensive solution using unobtrusive javascript:

var body = document.getElementsByTagName('body')[0];

function reveal() {
    body.style.display = 'block';
}

window.addEventListener('load', reveal, false);

body {
display: none;
}

div {
text-align: center;
}

<div>HELLO WORLD!</div>

Answer 7

Answer №4

<HTML>

<HEAD>
  <TITLE>Greetings</TITLE>
</HEAD>

<BODY ID="testbody" onload="testbody.style.display = '';" style="display: none;">
  <div align="CENTER">
    GREETINGS WORLD!
  </div>
</BODY>

</HTML>

Answer 8

<HTML>

<HEAD>
  <TITLE>Greetings</TITLE>
</HEAD>

<BODY ID="testbody" onload="testbody.style.display = '';" style="display: none;">
  <div align="CENTER">
    GREETINGS WORLD!
  </div>
</BODY>

</HTML>

Conceal the content until it has completed loading

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Error in Node REPL: Trying to access property '0' of undefined after adding a property to Object.prototype

Using jQuery to Convert CSV Data into an HTML Table

Steps for displaying the contents of a file from Firebase storage on a React component

Transform a C# model into an Angular model

How can I create a mipmap for a planet using three.js?

Looking for a jQuery script that can help compare if a specific div has a scrolltop value of 0 on a parallax website

Managing the verification of data existence in the ExpressJS service layer or controller

Checked boxes in the React dynamic checkbox list are not being marked

Does JavaScript work in Firefox, but not in IE or Chrome browsers?

Tap on the child to reveal their parent

Distribute progress bar evenly around a circular path

The functionality of the jQuery addClass method is failing to work when implemented on

Is there a specific method to access a JSON file with (js/node.js)?

Sequelize doesn't delay for the function's return value

Ensure that the div and table header remain in a fixed position when scrolling

Display an image with a colored background using CSS

What methods are available in JavaScript for determining the width of a section and implementing proper spacing for a menu?

Can each `InstancedBufferGeometry` instance have its own set of unique vertex colors?

The issue with the max-height transition not functioning properly arises when there are dynamic changes to the max-height

The jquery function is not functioning properly within a javascript code block, however it performs perfectly when placed outside