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?
Respuestas:
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
$('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;
}This script will add a div that covers the entire window 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, which has a new window load event</li>
<li>No image needed but it's easy to add one</li>
<li>Change the delay for 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
<!-- Place the script below at the bottom of the body -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>$(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();antes setTimeout(removeLoader, 2000);. Me quitaron el div para hacer que la página sea más liviana, pero esta solución la hace reutilizable.
window.onload = function(){ document.getElementById("loading").style.display = "none" }#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} <div id="loading">
<img id="loading-image" src="img/loading.gif" alt="Loading..." />
</div> Imagen de carga de página con el efecto de desvanecimiento más simple creado en JS:
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
.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 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
<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 hacer clic / disparar cualquier evento hasta que la página esté lista
$(window).on('load', function () {
$("#coverScreen").hide();
});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
$("#ucNoteGrid_grdViewNotes_ctl01_btnPrint").click(function () {
$("#coverScreen").show();
});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.
Por defecto, el contenido display:noney luego tener un controlador de eventos que lo establece display:blocko similar después de que está completamente cargado. Luego tenga un div configurado display:blockcon "Cargando", y configúrelo display:noneen el mismo controlador de eventos que antes.
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:
$.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 '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:
$(document).ready( function() {
$('table#with_slow_data').show();
$('div#loading image or text').hide();
});beforeSendy successcada llamada ajax.
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">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>:
$("#myElement").css("display", "none");... o en JavaScript simple:
document.getElementById("myElement").style.display = "none";$("#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:
$(document).ajaxStart(function(){
$("#loading").removeClass('hide');
}).ajaxStop(function(){
$("#loading").addClass('hide');
});CSS para el contenedor de carga y el contenido (principalmente de la respuesta de mehyaa), así como una hideclase:
#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 la respuesta @mehyaa, pero mucho más corta:
HTML (justo después <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 lo estoy usando):
$(window).load(function() {
$('#loading').remove();
});hide()el elemento que remove()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.
$.ajax({
type: 'GET',
url: url,
async: true,
dataType: 'json',
beforeSend: function (xhr) {
$( "<div class='loader' id='searching-loader'></div>").appendTo("#table-playlist-section");
$("html, body").animate( { scrollTop: $(document).height() }, 100);
},
success: function (jsonOptions) {
$('#searching-loader').remove();
.
.
}
});CSS
.loader {
border: 2px solid #f3f3f3;
border-radius: 50%;
border-top: 2px solid #3498db;
width: 30px;
height: 30px;
margin: auto;
-webkit-animation: spin 2s linear infinite; /* Safari */
animation: spin 2s linear infinite;
margin-top: 35px;
margin-bottom: -35px;
}
/* Safari */
@-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}para drupal en el archivo custom_theme.theme de su tema
function custom_theme_preprocess_html(&$variables) {
$variables['preloader'] = 1;
}En el archivo html.html.twig después de omitir el enlace del contenido principal en el cuerpo
{% if preloader %}
<div id="test-preloader" >
<div id="preloader-inner" class="cssload-container">
<div class="wait-text">{{ 'Please wait...'|t }} </div>
<div class="cssload-item cssload-moon"></div>
</div>
</div>
{% endif %} en archivo css
#test-preloader {
position: fixed;
background: white;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 9999;
}
.cssload-container .wait-text {
text-align: center;
padding-bottom: 15px;
color: #000;
}
.cssload-container .cssload-item {
margin: auto;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 131px;
height: 131px;
background-color: #fff;
box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-shadow: 0 0 21px 3px rgba(130, 130, 130, 0.26);
-o-box-shadow: 0 0 21px 3px rgba(130, 130, 130, 0.26);
-ms-box-shadow: 0 0 21px 3px rgba(130, 130, 130, 0.26);
-webkit-box-shadow: 0 0 21px 3px rgba(130, 130, 130, 0.26);
-moz-box-shadow: 0 0 21px 3px rgba(130, 130, 130, 0.26);
}
.cssload-container .cssload-moon {
border-bottom: 26px solid #008AFA;
border-radius: 50%;
-o-border-radius: 50%;
-ms-border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
animation: spin 1.45s ease infinite;
-o-animation: spin 1.45s ease infinite;
-ms-animation: spin 1.45s ease infinite;
-webkit-animation: spin 1.45s ease infinite;
-moz-animation: spin 1.45s ease infinite;
}