Usar un preloader

Problema:

Colocar un preloader animado

Cuando una página tarda en cargarse por cualquier causa el usuario puede pensar que el sitio dejó de funcionar y o bien intentará recargar la página o se irá a otro sitio. ¿Cómo evitar esto?

Solución

Usar un preloader
Se puede usar en elemento animado intermedio que se muestra mientras se está cargando la página, indicando que el sitio sigue funcinando y que está esperando a terminar la carga. El elemento se elimina cuando la página está totalmente cargada con un evento load de window

Ejemplo

//En la página ponemos un loader HTML o una imagen animada

<style>

.loader {

   background: gray;

   width: 100px;

   height: 100px;

   animation: movie 2s linear infinite alternate;

}
@keyframes movie {

   0% {opacity: 1;}

   100% {opacity: 0;}

}

</style>

<div class="loader" id="loader"></div>

//El script Javascript oculta el preloader cuando se termina de cargar la página

window.addEventListener('load', cerrarLoader);

function cerrarLoader(){

   let loader = document.getElementById('loader');

   loader.style.display = 'none';

}

//Puedes seleccionar el bloque del loader como en el ejemplo o mediante querySelector(".loader')

Volver al indice de trucos