El tiempo de carga de una página depende de los elementos de dicha página. Es decir, si cuenta con muchos archivos como imágenes, Javascript o CSS, la velocidad de la página puede verse afectada para peor. Este problema afecta a casi todas las páginas, incluso a aquellas que están muy diseñadas. Por fortuna, hay muchas manera de optimizar una página web para que cargue más rápido. Pero hasta que soluciones el problema de carga de tu web, puedes mostrar una imagen de carga antes de que carguen todos los elementos de tu web para informar al cliente de que debe esperar un poco hasta que la web este lista. Así mejoraremos muy mucho la experiencia del usuario.
Mediante CSS y jQuery puedes mostrar de manera sencilla un icono de carga hasta que la página se cargue por completo. En este artículo te proporcionaremos un método sencillo a través de varios snippets de código para que puedas mostrar la típica imagen de carga, durante la carga de la página.
HTML
Añade el siguiente código HTML despues del tag de apertura del <body>. Este div loader será el encargado de mostrar la imagen de carga cuando la web esté cargando.
<div class="loader"></div>
CSS
Utiliza el siguiente CSS para mostrar la imagen de carga en el div loader. Hace que la imagen se sitúe en el centro de la página y cubre toda la pantalla con un fondo blanco semitransparente.
.loader {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url('images/pageLoader.gif') 50% 50% no-repeat rgb(249,249,249);
opacity: .8;
}
Javascript
Antes que nada, incluye la librería jQuery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
Ahora añade la siguiente línea de código para esconder la imagen de carga cuando la página haya terminado de cargar
<script type="text/javascript">
$(window).load(function() {
$(".loader").fadeOut("slow");
});
</script>
Fuente: codexworld.com