in

javascript – ¿Cómo mostrar el div de carga de página hasta que la página haya terminado de cargarse?

apple touch icon@2

Respuesta original

Necesitaba esto y, después de investigar un poco, se me ocurrió esto (jQuery necesario):

Primero, justo después del <body> etiqueta agregue esto:

<div id="loading">
  <img id="loading-image" src="path/to/ajax-loader.gif" alt="Loading..." />
</div>

Luego agregue la clase de estilo para el div y la imagen a su CSS:

#loading {
  position: fixed;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  text-align: center;
  opacity: 0.7;
  background-color: #fff;
  z-index: 99;
}

#loading-image {
  position: absolute;
  top: 100px;
  left: 240px;
  z-index: 100;
}

Luego, agregue este javascript a su página (preferiblemente al final de su página, antes de su cierre </body> etiqueta, por supuesto):

<script>
  $(window).load(function() {
    $('#loading').hide();
  });
</script>

Finalmente, ajuste la posición de la imagen de carga y la background-color del div de carga con la clase de estilo.

Esto es todo, debería funcionar bien. Pero, por supuesto, deberías tener un ajax-loader.gif en algún lugar o use la URL base64 para las imágenes src valor. Obsequios aquí. (Haga clic con el botón derecho> Guardar imagen como …)

Actualizar

Para jQuery 3.0 y superior, puede usar:

<script>
  $(window).on('load', function () {
    $('#loading').hide();
  }) 
</script>

Actualizar

La respuesta original es de jQuery y antes de la era de flexbox. Puede usar muchas bibliotecas / marcos de administración de vistas ahora como Angular, React y Vue.js. Y para CSS tienes la opción flexbox. A continuación se muestra la alternativa de CSS:

#loading {
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0.7;
  background-color: #fff;
  z-index: 99;
}

#loading-image {
  z-index: 100;
}

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Técnicas de estimación: análogas

oPMXPk78nFAyRkp7XMZntn 1200 80

Man of Steel 2: ¿Henry Cavill regresará como Superman?