Si tiene ciertas páginas en su sitio web que tardan algún tiempo en cargarse, es posible que desee considerar un cargador de páginas. Un cargador de página es cualquier tipo de animación que le comunica visualmente a un visitante que la página se está cargando y que se quede quieto durante unos segundos. Sin un cargador de página, un visitante podría pensar que su sitio no responde y simplemente hacer clic en la frustración. Un cargador de páginas también proporciona una pequeña distracción que puede hacer que la espera parezca mucho más corta.
Si el retraso en la carga de su página se debe a algo como la lectura de una base de datos, es probable que el visitante permanezca en la página actual hasta que se cargue la página a la que intenta acceder. Esto es diferente a un retraso en la carga de la página como imágenes grandes, donde el visitante llegaría a la página antes de los retrasos. Es el escenario anterior en el que un cargador de páginas CSS puede funcionar muy bien. Así es como se hace:
- Crea un DIV con el cargador de tu página en él. Esto podría ser un pequeño GIF animado o tal vez una animación flash SWF.
- En su CSS, coloque este DIV justo donde lo necesite. Podría colocarse sobre el contenido principal, o podría hacer un borrado de pantalla completa como este:
div#page_loader { position: absolute; top: 0; bottom: 0%; left: 0; right: 0%; background-color: white; z-index: 99; } - Agregue este DIV a cada página de su sitio web que enlace a la página para la que necesita un cargador. Entonces asegúrate de agregar pantalla: ninguna; a su CSS para este DIV, esto hará que no aparezca en estas páginas en circunstancias normales.
- Se necesita un toque de JavaScript para alternar la propiedad de visualización de ese DIV. Este javascript se coloca en cada elemento vinculado que se vincula a la página de carga lenta. Al igual que:
<a onclick="javascript:document.getElementById('page_loader').style.display='block';" href="https://css-tricks.com/css-page-loader/slowpage.html">Slow Page</a>
Al hacer clic en ese enlace, se activará el javascript para configurar la visualización del DIV en “bloquear”, revelándolo instantáneamente. Esto será visible para el visitante hasta que se cargue la página de carga lenta, luego se moverán allí.
Actualizar: Hay una nueva publicación que incluye un ejemplo aquí.