Tengo una sección en nuestro sitio web que se carga bastante despacio ya que está haciendo algunas llamadas intensivas.
¿Alguna idea de cómo puedo obtener un div para decir algo similar a "cargar" para mostrar mientras la página se prepara y luego desaparecer cuando todo está listo?Cómo mostrar la página Cargando div hasta que la página haya terminado de cargar
El contenido predeterminado es display:none y luego tiene un controlador de eventos que lo establece en display:block o similar después de que esté completamente cargado. Luego tenga un div configurado en display:block con "Cargando" en él, y configúrelo en display:none en el mismo controlador de eventos que antes.
Crear un elemento <div> que contiene su mensaje de carga, dará la <div> una identificación, y luego cuando su contenido se haya terminado la carga, ocultar el <div>:
$("#myElement").css("display", "none");
... o en la llanura de JavaScript:
document.getElementById("myElement").style.display = "none";
Bueno, esto depende en gran medida de cómo se cargan los elementos necesarios en la "llamada intensiva", mi idea inicial es que estás haciendo esas cargas a través de ajax. Si ese es el caso, entonces se podría utilizar la opción 'beforeSend' y hacer una llamada AJAX como esta:
$.ajax({
type: 'GET',
url: "some.php",
data: "name=John&location=Boston",
beforeSend: function(xhr){ <---- use this option here
$('.select_element_you_want_to_load_into').html('Loading...');
},
success: function(msg){
$('.select_element_you_want_to_load_into').html(msg);
}
});
EDITAR veo, en ese caso, usando uno de los 'display:block'/'display:none' opciones anteriormente en relación con $(document).ready(...) de jQuery es probablemente el camino a seguir. La función $(document).ready() espera a que se cargue toda la estructura del documento antes de ejecutar (pero no espera a que todos los medios carguen). Haría algo como esto:
$(document).ready(function() {
$('table#with_slow_data').show();
$('div#loading image or text').hide();
});
desafortunadamente no es a través de ajax, está esperando que el script php prepare los datos de la base de datos, por lo que algunos de los elementos html se cargan, luego el navegador espera la tabla de datos antes de cargar el resto. Que podría parecer como si la página se hubiera estancado, por lo que necesita algo allí para mostrar que "algo está sucediendo" y no hacer que el usuario se aleje ... –
FYI: El principio de la web (sin ajax) es que un servidor representa una página entera en el servidor y al finalizar envía este resultado (html) al navegador. Si el renderizado de la página se detiene en algún lugar en el medio (mientras que puede ver la página que aparece en el navegador), no puede ser una secuencia de comandos php, porque php solo se ejecuta en el servidor. – Peter
Consulte mi respuesta para evitar agregar 'beforeSend' y' success' a cada llamada de AJAX. – rybo111
Window.unload funciona bien. Solo coloca esto en tus páginas. (Ejemplo usando jQuery):
<script type="text/javascript">
$(window).unload(function() {
var html = "<img src='html/loading.gif' />";
$('#loading').append(html);
});
</script>
<div id="loading" />
he necesitado esto y después de algunas investigaciones en el Internet que se me ocurrió esto (jQuery es necesario):
En primer lugar justo después de la etiqueta del cuerpo añadir lo siguiente:
<div id="loading">
<img id="loading-image" src="images/ajax-loader.gif" alt="Loading..." />
</div>
a continuación, añada la clase de estilo para el div y la imagen de tu 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;
}
y por último añadir t su javascript para su página (preferiblemente al final de la página, antes de cerrar <body> etiqueta, por supuesto):
<script language="javascript" type="text/javascript">
$(window).load(function() {
$('#loading').hide();
});
</script>
luego ajustar la posición de la imagen de la carga y el color de fondo del div carga con la clase de ayuda estilo .
Esto es, funciona bien. Pero, por supuesto, debe tener un ajax-loader.gif en algún lugar.
al redireccionar a otra página, se mantiene en la misma página y de repente muestra la página deseada, luego: muestra el panel de carga en la página anterior antes de descargar, así como la página de destino. window.onbeforeunload = function() {$ ('# loading'). Show(); } –
+1 Esto es corto, dulce y claro, me encanta. Sin embargo, eliminaré ese div y dejaré solo el (; –
tarda en cargar la imagen de carga, hasta que la página ya esté cargada – Elyor
JS:
window.onload = function(){ document.getElementById("loading").style.display = "none" }
CSS:
#loading {width: 100%;height: 100%;top: 0px;left: 0px;position: fixed;display: block; z-index: 99}
#loading-image {position: absolute;top: 40%;left: 45%;z-index: 100}
HTML: la carga de imágenes
<div id="loading">
<img id="loading-image" src="img/loading.gif" alt="Loading..." />
</div>
página con más simple fadeout efecto creado en JS:
Basado en @mehyaa answe r, pero mucho más corto:
HTML (justo después de <body>):
<img id = "loading" src = "loading.gif" alt = "Loading indicator">
CSS:
#loading {
position: absolute;
top: 50%;
left: 50%;
width: 32px;
height: 32px;
/* 1/2 of the height and width of the actual gif */
margin: -16px 0 0 -16px;
z-index: 100;
}
Javascript (jQuery, ya que ya estoy usando):
$(window).load(function() {
$('#loading').remove();
});
Es mejor 'ocultar()' el elemento en lugar de 'remove()', para que pueda volver a usarlo. – rybo111
Aquí está el jQuery que terminé usando, que supervisa todos los ajax start/stop, por lo que no necesita agregarlo a e ada ajax llamada:
$(document).ajaxStart(function(){
$("#loading").removeClass('hide');
}).ajaxStop(function(){
$("#loading").addClass('hide');
});
CSS para la carga de contenedores & contenido (en su mayoría de la respuesta de mehyaa), así como una clase hide:
#loading {
width: 100%;
height: 100%;
top: 0px;
left: 0px;
position: fixed;
display: block;
opacity: 0.7;
background-color: #fff;
z-index: 99;
text-align: center;
}
#loading-content {
position: absolute;
top: 50%;
left: 50%;
text-align: center;
z-index: 100;
}
.hide{
display: none;
}
HTML:
<div id="loading" class="hide">
<div id="loading-content">
Loading...
</div>
</div>
El problema es que si tengo una autocompletar cargada ajax en una entrada, aparecerá el cargador. – Lucas
Este script agregará un div que cubre toda la pantalla a medida que se carga la página. Mostrará un spinner de carga solo CSS automáticamente. Esperará hasta que la ventana (no el documento) termine de cargarse, luego esperará unos segundos adicionales.
Coloque la secuencia de comandos debajo de la parte inferior del cuerpo.
CSS código del gestor de https://projects.lukehaas.me/css-loaders
$('body').append('<div style="" id="loadingDiv"><div class="loader">Loading...</div></div>');
$(window).on('load', function(){
setTimeout(removeLoader, 2000); //wait for page load PLUS two seconds.
});
function removeLoader(){
$("#loadingDiv").fadeOut(500, function() {
// fadeOut complete. Remove the loading div
$("#loadingDiv").remove(); //makes page more lightweight
});
} .loader,
.loader:after {
border-radius: 50%;
width: 10em;
height: 10em;
}
.loader {
margin: 60px auto;
font-size: 10px;
position: relative;
text-indent: -9999em;
border-top: 1.1em solid rgba(255, 255, 255, 0.2);
border-right: 1.1em solid rgba(255, 255, 255, 0.2);
border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
border-left: 1.1em solid #ffffff;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation: load8 1.1s infinite linear;
animation: load8 1.1s infinite linear;
}
@-webkit-keyframes load8 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes load8 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#loadingDiv {
position:absolute;;
top:0;
left:0;
width:100%;
height:100%;
background-color:#000;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
This script will add a div that covers the entire screen as the page loads. It will show a CSS-only loading spinner automatically. It will wait until the window (not the document) finishes loading..
<ul>
<li>Works with jQuery 3 (it has a new window load event)</li>
<li>No image needed but it's easy to add one</li>
<li>Change the delay for more branding or instructions</li>
<li>Only dependency is jQUery.</li>
</ul>
Place the script below at the bottom of the body.
CSS loader code from https://projects.lukehaas.me/css-loaderstengo otro por debajo solución simple para esto, que perfectamente trabajado para mí.
En primer lugar crear un CSS con el nombre Lockon clase que es superposición transparente junto con el GIF de carga como se muestra a continuación
.LockOn { display: block; visibility: visible; position: absolute; z-index: 999; top: 0px; left: 0px; width: 105%; height: 105%; background-color:white; vertical-align:bottom; padding-top: 20%; filter: alpha(opacity=75); opacity: 0.75; font-size:large; color:blue; font-style:italic; font-weight:400; background-image: url("../Common/loadingGIF.gif"); background-repeat: no-repeat; background-attachment: fixed; background-position: center; }
Ahora tenemos que crear nuestro div con esta clase que cubren toda la página como una endecha excesiva cada vez que se carga la página conseguir
<div id="coverScreen" class="LockOn">
</div>
Ahora tenemos que ocultar esta pantalla de la cubierta cada vez que la página está lista y por lo que podemos restringir el usuario haga clic/disparar cualquier evento hasta que la página esté lista
$(window).on('load', function() {
$("#coverScreen").hide();
});
La solución anterior estará bien cada vez que se carga la página.
Ahora está después de cargar la página a la pregunta, cada vez que la hacemos clic en un botón o un evento que se llevará mucho tiempo, tenemos que mostrar esto en el evento de cliente clic como se muestra a continuación
$("#ucNoteGrid_grdViewNotes_ctl01_btnPrint").click(function() {
$("#coverScreen").show();
});
Eso significa cuando hagamos clic en este botón de impresión (que tardará mucho en dar el informe) mostrará nuestra pantalla de portada con GIF que da el resultado 
y una vez que la página esté lista, se activará la función de carga y se ocultará la pantalla de portada una vez que la pantalla está completamente cargado.
¡Genial!solo tuve que usarlos para hacer que ocupara la posición de pantalla completa: fijo; ancho: 100vw; altura: 100vh; – numbtongue
Mi blog funcionará al 100 por ciento.
function showLoader()
{
$(".loader").fadeIn("slow");
}
function hideLoader()
{
$(".loader").fadeOut("slow");
}
.loader {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url('pageLoader2.gif') 50% 50% no-repeat rgb(249,249,249);
opacity: .8;
}
<div class="loader">
qué evento usaría para hacer esto? Carga de la página Javascript? o hay un lugar mejor? – Miles
Depende de si tiene otros JS haciendo cosas de configuración para la página; si es así, llámelo una vez que lo haya hecho, de lo contrario, la carga del documento funciona bien. – Amber