¿Cómo mostrar la página cargando div hasta que la página haya terminado de cargarse?

148

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?

Shadi Almosri
fuente

Respuestas:

215

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 ...)

mehyaa
fuente
55
cuando se redirige 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 la descarga, así como en la página de destino. window.onbeforeunload = function () {$ ('# loading'). show (); }
Sameh Deabes
2
+1 Esto es corto, dulce y claro, me encanta. Sin embargo, eliminaré ese div y dejaré solo el <img> (;
Francisco Presencia
3
está tardando un poco en cargar la imagen de carga, hasta que la página ya está cargada
Elyor
1
Vea mi respuesta para evitar agregar $('#loading').hide();en cada carga de página.
rybo111
Este código Ajax funcionará de manera efectiva y rápida: smallenvelop.com/display-loading-icon-page-loads-completely
JWC May
36

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.

  • Funciona con jQuery 3 (tiene un nuevo evento de carga de ventana)
  • No se necesita imagen, pero es fácil agregar una
  • Cambia el retraso para obtener más marcas o instrucciones
  • La única dependencia es jQuery.

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>

Victor Stoddard
fuente
¿Cómo agregar esto para las etiquetas imag?
Mano M
1
@ManoM se $(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)
Victor Stoddard
Para mí, esto solo funciona cuando la página se carga por primera vez, es decir, cuando se abre o actualiza el navegador / pestaña. Sin embargo, no aparece cuando la página se carga después de abrirse. Tengo una página con conmutadores que muestran diferentes contenidos y al alternar entre los contenidos tarda un poco en cargar. ¿Hay alguna manera de adaptar este mismo código para cargar no solo la primera vez que se abre la página, sino cada vez que tarda en cargar?
Joehat
1
@Joehat reemplazar $( "#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.
Victor Stoddard
Intenté tu código ... Es extraño. Cuando llamo a mi página, muestra una página en blanco (está cargando contenido). Después de unos segundos (creo que los contenidos están cargados) muestra el cargador durante 2 segundos, que muestra la página completa. Puede echar un vistazo: criferrara.it/crigest/toshiba
sunlight76
28

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:

Dariusz J
fuente
9

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 estaresultado 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.

Rinoy Ashokan
fuente
1
¡Excelente! solo tuve que usarlos para colocarlo en pantalla completa: fijo; ancho: 100vw; altura: 100vh;
Boateng
6

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.

Ámbar
fuente
1
¿Qué evento usarías 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 después de que se hayan hecho, si no, entonces la carga de documentos funciona bien.
Ámbar
2

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();
});
btelles
fuente
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 y el navegador espera la tabla de datos antes de cargar el resto. Lo que podría parecer que la página se ha estancado, por lo que necesita que se muestre algo allí para mostrar que "algo está sucediendo" y no hacer que el usuario se aleje ...
Shadi Almosri
FYI: El principio de la web (sin ajax) es que un servidor representa una página completa del lado del servidor y al finalizar envía este resultado (html) al navegador. Si la representación de la página se detiene en algún lugar en el medio (aunque puede ver la página que aparece en el navegador), no puede ser un script php, porque php solo se ejecuta en el lado del servidor.
Peter
Vea mi respuesta para evitar agregar beforeSendy successcada llamada ajax.
rybo111
2

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">

Jitendra Patel
fuente
1

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";
Steve Harrison
fuente
Simple y hace el trabajo. Desde una perspectiva de legibilidad, ¿no es $("#myElement").hide()más fácil para la vista?
user3613932
1

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>
rybo111
fuente
El problema es que si tengo un autocompletado ajax cargado en una entrada, aparecerá el cargador.
Lucas
0

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();
  });
Francisco Presencia
fuente
1
Es mejor para hide()el elemento que remove()para que pueda reutilizarlo.
rybo111
0

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); }
}
SuperEye
fuente
0

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;
 }
Pradeep
fuente