Tengo una sección en nuestro sitio web que se carga bastante lentamente, ya que está haciendo algunas llamadas intensivas.
¿Alguna idea de cómo puedo divmostrar algo similar a "cargando" mientras la página se prepara y luego desaparece cuando todo está listo?
Lo necesitaba y después de un poco de investigación se me ocurrió esto ( jQuery necesita ):
Primero, justo después de la <body>etiqueta, agregue esto:
<div id="loading">
<img id="loading-image" src="images/ajax-loader.gif" alt="Loading..." />
</div>Luego agregue la clase de estilo para el div y la imagen a su CSS:
#loading {
width: 100%;
height: 100%;
top: 0;
left: 0;
position: fixed;
display: block;
opacity: 0.7;
background-color: #fff;
z-index: 99;
text-align: center;
}
#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 </body>etiqueta de cierre , por supuesto):
<script>
$(window).load(function() {
$('#loading').hide();
});
</script>Finalmente, ajuste la posición de la imagen de carga y la background-colourdel div de carga con la clase de estilo.
Esto es, debería funcionar bien. Pero, por supuesto, tienes que tener un ajax-loader.giflugar. Regalos gratis aquí . (Haga clic con el botón derecho> Guardar imagen como ...)
$('#loading').hide();en cada carga de página.Este script agregará un div que cubre toda la ventana a medida que se carga la página. Mostrará un control de carga de solo CSS automáticamente. Esperará hasta que la ventana (no el documento) termine de cargarse, luego esperará unos segundos adicionales opcionales.
Código de cargador CSS de https://projects.lukehaas.me/css-loaders
fuente
$(window).on("load", handler)dispara cuando todos los objetos DOM terminan de cargarse, incluidas imágenes, scripts e incluso iframes. Si desea esperar a que se cargue una imagen específica, use$('#imageId').on("load", handler)$( "#loadingDiv" ).remove();con$( "#loadingDiv" ).hide();y agregar$( "#loadingDiv" ).show();antessetTimeout(removeLoader, 2000);. Me quitaron el div para hacer que la página sea más liviana, pero esta solución la hace reutilizable.Imagen de carga de página con el efecto de desvanecimiento más simple creado en JS:
fuente
Tengo otra solución simple a continuación para esto que funcionó perfectamente para mí.
En primer lugar, cree un CSS con el nombre de la clase Lockon que es una superposición transparente junto con la carga de GIF como se muestra a continuación
Ahora necesitamos crear nuestro div con esta clase que cubra toda la página como una superposición cada vez que se carga la página
Ahora necesitamos ocultar esta pantalla de portada siempre que la página esté lista y para que podamos restringir al usuario hacer clic / disparar cualquier evento hasta que la página esté lista
La solución anterior estará bien siempre que la página se esté cargando.
Ahora la pregunta es después de cargar la página, cada vez que hacemos clic en un botón o un evento que llevará mucho tiempo, debemos mostrar esto en el evento de clic del cliente como se muestra a continuación
Eso significa que cuando hacemos clic en este botón de impresión (que llevará mucho tiempo dar el informe), mostrará nuestra pantalla de portada con GIF, lo que da
resultado y, una vez que la página esté lista, se activará la función de carga de Windows y se ocultará la pantalla de portada. una vez que la pantalla está completamente cargada.
fuente
Por defecto, el contenido
display:noney luego tener un controlador de eventos que lo establecedisplay:blocko similar después de que está completamente cargado. Luego tenga un div configuradodisplay:blockcon "Cargando", y configúrelodisplay:noneen el mismo controlador de eventos que antes.fuente
Bueno, esto depende en gran medida de cómo esté cargando los elementos necesarios en la 'llamada intensiva', mi pensamiento inicial es que está haciendo esas cargas a través de ajax. Si ese es el caso, puede usar la opción 'beforeSend' y hacer una llamada ajax como esta:
EDITAR Veo, en ese caso, usar una de las
'display:block'/'display:none'opciones anteriores junto con$(document).ready(...)jQuery es probablemente el camino a seguir. La$(document).ready()función espera a que se cargue toda la estructura del documento antes de ejecutarse ( pero no espera a que se carguen todos los medios ). Harías algo como esto:fuente
beforeSendysuccesscada llamada ajax.Mi blog funcionará al 100 por ciento.
fuente
Cree un
<div>elemento que contenga su mensaje de carga, proporcione<div>una ID y luego, cuando su contenido haya terminado de cargarse, oculte<div>:... o en JavaScript simple:
fuente
$("#myElement").hide()más fácil para la vista?Aquí está el jQuery que terminé usando, que monitorea todo el inicio / detención de ajax, por lo que no necesita agregarlo a cada llamada de ajax:
CSS para el contenedor de carga y el contenido (principalmente de la respuesta de mehyaa), así como una
hideclase:HTML:
fuente
Basado en la respuesta @mehyaa, pero mucho más corta:
HTML (justo después
<body>):CSS:
Javascript (jQuery, ya que ya lo estoy usando):
fuente
hide()el elemento queremove()para que pueda reutilizarlo.Esto se sincronizará con una llamada api. Cuando se activa la llamada api, se muestra el cargador. Cuando la llamada a la API tiene éxito, se elimina el cargador. Esto se puede usar para cargar la página o durante una llamada API.
CSS
fuente
para drupal en el archivo custom_theme.theme de su tema
En el archivo html.html.twig después de omitir el enlace del contenido principal en el cuerpo
en archivo css
fuente