javascript - nuestra - load jquery
Cómo mostrar la página Cargando div hasta que la página haya terminado de cargarse (11)
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?
Aquí está el jQuery que terminé usando, que monitorea todos los ajax start / stop, por lo que no es necesario agregarlo a cada llamada ajax:
$(document).ajaxStart(function(){
$("#loading").removeClass(''hide'');
}).ajaxStop(function(){
$("#loading").addClass(''hide'');
});
CSS para el contenido y el contenedor de carga (principalmente 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>
Basado en @mehyaa respuesta, 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 lo estoy usando):
$(window).load(function() {
$(''#loading'').remove();
});
Bueno, esto depende en gran medida de cómo estás cargando 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 podría usar 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, usar una de las opciones ''display:block''/''display:none'' arriba junto 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 su ejecución ( pero no espera a que se carguen todos los medios ). Harías algo como esto:
$(document).ready( function() {
$(''table#with_slow_data'').show();
$(''div#loading image or text'').hide();
});
Cree un elemento <div> que contenga su mensaje de carga, otorgue al <div> un ID, y luego, cuando su contenido haya terminado de cargarse, oculte el <div> :
$("#myElement").css("display", "none");
... o en JavaScript simple:
document.getElementById("myElement").style.display = "none";
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.
- Funciona con jQuery 3 (tiene un nuevo evento de carga de ventana)
- No se necesita ninguna imagen, pero es fácil agregar una
- Cambia la demora para obtener más branding o instrucciones
- Solo la dependencia es jQUery.
Coloque la secuencia de comandos a continuación en la parte inferior del cuerpo.
Código de cargador CSS 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-loaders
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:
<div id="loading">
<img id="loading-image" src="img/loading.gif" alt="Loading..." />
</div>
Imagen de carga de página con el efecto de fadeout más simple creado en JS:
Lo he necesitado y después de algunas investigaciones en Internet se me ocurrió esto (se necesita jQuery):
Primero, justo después de la etiqueta corporal, agregue esto:
<div id="loading">
<img id="loading-image" src="images/ajax-loader.gif" alt="Loading..." />
</div>
A continuación, 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;
}
Y finalmente agregue este javascript a su página (preferiblemente al final de su página, antes de cerrar la etiqueta <body> por supuesto):
<script language="javascript" type="text/javascript">
$(window).load(function() {
$(''#loading'').hide();
});
</script>
Luego ajuste la posición de la imagen de carga y el color de fondo del div de carga con la clase de estilo de ayuda.
Esto es, funciona bien. Pero, por supuesto, tienes que tener un ajax-loader.gif alguna parte.
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">
Predetermina el contenido para display:none y luego tiene un controlador de eventos que lo configura para display:block o similar después de que esté completamente cargado. Luego tenga un div configurado para display:block con "Cargando" y configúrelo para display:none en el mismo controlador de eventos que antes.
Tengo otra solución sencilla a continuación para esto que funcionó perfectamente para mí.
En primer lugar, cree un CSS con nombre Lockon class, que es una superposición transparente junto con la carga de GIF 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 cubre toda la página como una sobre colocación cada vez que la página se carga
<div id="coverScreen" class="LockOn">
</div>
Ahora necesitamos ocultar esta pantalla de portada siempre que la página esté lista y para que podamos restringir al usuario de hacer 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 la pregunta es después de que se carga la página, siempre que hagamos clic en un botón o en un evento que llevará mucho tiempo, tenemos que mostrar esto en el evento de clic del cliente como se muestra a continuación
$("#ucNoteGrid_grdViewNotes_ctl01_btnPrint").click(function () {
$("#coverScreen").show();
});
Eso significa que cuando hagamos clic en este botón de impresión (lo que llevará mucho tiempo dar el informe), se mostrará nuestra pantalla de portada con GIF que dan resultado y una vez que la página está lista arriba, las ventanas en la función de carga se dispararán y ocultarán la pantalla de la cubierta una vez que la pantalla esté completamente cargada.
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" />