Búsqueda de sitios web

javascript - ¿Cómo mostrar un div de carga de página hasta que la página haya terminado de cargarse?

Tengo una sección en nuestro sitio web que se carga bastante lento ya que está realizando algunas llamadas intensivas.

¿Alguna idea de cómo puedo hacer que un div diga algo similar a "cargando" para mostrar mientras la página se prepara y luego desaparezca cuando todo esté listo?

Respuesta #1

Respuesta Original

He necesitado esto y después de algo de investigación llegué a esto (se necesita jQuery):

Primero, justo después de la etiqueta <body> añade esto:

<div id="loading">
  <img id="loading-image" src="path/to/ajax-loader.gif" alt="Loading..." />
</div>

Luego agrega la clase de estilo para el div y la imagen a tu CSS:

#loading {
  position: fixed;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  text-align: center;
  opacity: 0.7;
  background-color: #fff;
  z-index: 99;
}

#loading-image {
  position: absolute;
  top: 100px;
  left: 240px;
  z-index: 100;
}

Luego, agrega este javascript a tu página (preferiblemente al final de tu página, antes de tu etiqueta de cierre </body>, por supuesto):

<script>
  $(window).load(function() {
    $('#loading').hide();
  });
</script>

Finalmente, ajusta la posición de la imagen de carga y el background-color del div de carga con la clase de estilo.

Esto es todo, debería funcionar bien. Pero, por supuesto, deberías tener un ajax-loader.gif en algún lugar o usar una URL en base64 para el valor de src de la imagen. Regalos aquí. (Clic derecho > Guardar imagen como...)

Actualizar

Para jQuery 3.0 y versiones superiores, puedes usar:

<script>
  $(window).on('load', function () {
    $('#loading').hide();
  }) 
</script>

Actualizar

La respuesta original es de jQuery y de la era anterior a flexbox. Ahora puedes usar muchas bibliotecas/frameworks de gestión de vistas como Angular, React y Vue.js. Y para CSS tienes la opción de flexbox. A continuación se muestra una alternativa de CSS:

#loading {
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0.7;
  background-color: #fff;
  z-index: 99;
}

#loading-image {
  z-index: 100;
}

Respuesta #2

Este script agregará un div que cubre toda la ventana al cargar la página. Mostrará un spinner de carga solo con CSS automáticamente. Esperará hasta que la ventana (no el documento) termine de cargarse, y 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 más marca o instrucciones
  • La única dependencia es jQuery.

Código del 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>

Respuesta #3

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:

Respuesta #4

Tengo otra solución simple a continuación para esto que me funcionó perfectamente.

En primer lugar, crea un CSS con el nombre de clase Lockon que sea una superposición transparente junto con un 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 necesitamos crear nuestro div con esta clase que cubra toda la página como una superposición cada vez que la página se esté cargando

<div id="coverScreen"  class="LockOn">
</div>

Ahora necesitamos ocultar esta pantalla de inicio 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 siempre que la página esté cargando.

Ahora la pregunta es, después de que la página se cargue, cada vez que hagamos clic en un botón o un evento que tomará mucho tiempo, necesitamos 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 imprimir (lo cual tomará mucho tiempo para generar el informe) mostrará nuestra pantalla de portada con un GIF que da

resultado y una vez que la página esté lista, la función on load de la ventana superior se ejecutará y ocultará la pantalla de cobertura una vez que la pantalla esté completamente cargada.

Artículos relacionados