Posterior a de una extensa compilación de datos dimos con la respuesta esta dificultad que tienen algunos lectores. Te compartimos la solución y nuestro objetivo es que resulte de gran apoyo.

Solución:

Puedes esperar hasta que el cuerpo esté listo:

function onReady(callback) 
  var intervalId = window.setInterval(function() 
    if (document.getElementsByTagName('body')[0] !== undefined) 
      window.clearInterval(intervalId);
      callback.call(this);
    
  , 1000);


function setVisible(selector, visible) 
  document.querySelector(selector).style.display = visible ? 'block' : 'none';


onReady(function() 
  setVisible('.page', true);
  setVisible('#loading', false);
);

body 
  background: #FFF url("https://i.imgur.com/KheAuef.png") top left repeat-x;
  font-family: 'Alex Brush', cursive !important;


.page     display: none; padding: 0 0.5em; 
.page h1  font-size: 2em; line-height: 1em; margin-top: 1.1em; font-weight: bold; 
.page p   font-size: 1.5em; line-height: 1.275em; margin-top: 0.15em; 

#loading 
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100vw;
  height: 100vh;
  background-color: rgba(192, 192, 192, 0.5);
  background-image: url("https://i.stack.imgur.com/MnyxU.gif");
  background-repeat: no-repeat;
  background-position: center;

  
The standard Lorem Ipsum passage
  
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Aquí hay un JSFiddle que demuestra esta técnica.

Al comienzo de su secuencia de comandos de carga, simplemente haga su

visible a través de css [display:block;] y haz que el resto de la página sea invisible a través de css[display:none;].

Una vez que se realiza la carga, simplemente haga que la carga sea invisible y la página vuelva a ser visible con la misma técnica. Puede usar document.getElementById() para seleccionar los divs que desea cambiar la visualización.

Editar: Así es como se vería. Cuando el cuerpo termine de cargarse, llamará a la función javascript que cambiará los valores de visualización de los diferentes elementos. Por defecto, su estilo sería tener la página no visible y la carga visible.

Para construir más sobre la parte ajax que puede usar o no (de los comentarios)

una forma sencilla de cargar otra página y reemplazarla con la actual es: