jQuery carga de páginas HTML enteras con spinner

Estoy intentando algo simple: crear un script jQuery que espere para mostrar toda la página, incluidos todos los DIV, texto e imágenes. Mientras se carga la página, en lugar de mostrar partes de la página me gustaría mostrar una imagen GIF giratoria, y cuando se carga toda la página, podemos atenuar los contenidos de la página en la ventana del navegador.jQuery carga de páginas HTML enteras con spinner

Hay una gran cantidad de scripts para cargar con una solicitud de AJAX en un contenedor DIV, pero esto es diferente. Esto mostrará un GIF giratorio mientras se carga una página HTML. Cualquier ayuda se agradece

Este tipo de script sólo funciona en las peticiones Ajax

$('#loadingDiv') 
    .hide() // hide it initially 
    .ajaxStart(function() { 
     $(this).show(); 
    }) 
    .ajaxStop(function() { 
     $(this).hide(); 
    });

Fuente

2012-05-24 user1317510

$(document).ready(...) se dispara en cuanto se carga DOM. Esto es para pronto Usted sould utiliza $(window).load(...):

JavaScript:

$(window).load(function(){ 
    $('#cover').fadeOut(1000); 
})

CSS:

#cover { 
    background: url("to/your/ajaxloader.gif") no-repeat scroll center center #FFF; 
    position: absolute; 
    height: 100%; 
    width: 100%; 
}

HTML:

<div id="cover"></div> 
<!-- rest of the page... -->

vistazo a este jsFiddle: http://jsfiddle.net/gK9wH/9/

Fuente

2012-05-24 17:54:47 AvL

sí, el documento listo se dispara demasiado pronto, y algunos elementos podrían estar en la mitad del proceso de renderizado en la ventana del navegador y lo mostrará ... entonces, ¿cómo podemos mostrar primero la ruleta y luego ocultarla? Si estamos esperando la ventana para cargar? – user1317510

Ver edición ... o directamente aquí: http://jsfiddle.net/gK9wH/ – AvL

sí. ¡Veo que funciona! Pero no veo el spinner. tal vez el spinner está oculto por el desplazamiento de la ventana JSFiddle? – user1317510

Creo que la mejor forma sería la de tener una 'cobertura' div que cubrirá toda la página mientras se carga. Sería opaco y contendría su GIF.

El siguiente sería entonces ocultar la div una vez que la página se ha cargado:

$(document).ready(function() { 
    // Hide the 'cover' div 
});

La siguiente haría que el div del tamaño de la página:

.div{ 
    height:100%; 
    width:100%; 
    overflow:hidden; 
}

Fuente

2012-05-24 17:48:27

Primero Qué quiere decir todo en el entre las etiquetas del cuerpo? La mejor manera de hacer el regalo giratorio es agregar una clase que defina el gif como ninguno repetido y centrado. Quita la clase cuando la página está lista para mostrarse.

$('body').addClass('loading') 
$('body').removeClass('loading')

Ésta es siempre la mejor técnica porque si envía algo, entonces tratar de añadir el gif través de una adición DOM algunos navegadores no lo harán porque la página ha sido enviado.

Fuente

2012-05-24 17:53:39 Elliott

es así, ¿cómo podemos hacer eso exactamente? Lo que quiero decir es ... ¿cómo sabemos cuándo se cargan todos los bytes y es hora de eliminar la clase de carga y fundido en la parte principal del cuerpo? – user1317510

Cubriría toda la página con una superposición y luego eliminaría la superposición una vez que se cargue la página. Puede modificar esto para mostrar también un loading.gif si lo desea. He aquí un ejemplo:

HTML

<body> 
<div id="container"> 
    <h2>Header</h2> 
    <p>Page content goes here.</p> 
    <br /> 
    <button id="remove_overlay">Remove Overlay</button> 
</div> 
</body>

CSS

#container{padding:20px;} 

h2 {margin-bottom: 10px; font-size: 24px; font-weight: bold;} 

#overlay { 
     position: absolute; 
     top: 0; 
     left: 0; 
     width: 100%; 
     height:2305px !important; /*change to YOUR page height*/ 
     background-color: #000; 
     filter:alpha(opacity=50); 
     -moz-opacity:0.5; 
     -khtml-opacity: 0.5; 
     opacity: 0.5; 
     z-index: 998; 
} 
#remove_overlay{position:relative; z-index:1000;}

jQuery:

$(document).ready(function() { 

     // Set a variable that is set to the div containing the overlay (created on page load) 
     var page_overlay = jQuery('<div id="overlay"> </div>'); 

     // Function to Add the overlay to the page 
     function showOverlay(){ 
      page_overlay.appendTo(document.body); 
     } 
     // Function to Remove the overlay from the page 
     function hideOverlay(){ 
      page_overlay.remove(); 
     } 

     // Show the overlay. 
     $(showOverlay); 

     }); 
}); 

$(document).ready(function() { 
    $(hideOverlay); 
});

Tendrá que ajustar este para que se cargue la superposición tan pronto como sea se solicita la página (modifique la llamada $(showOverlay); para que se dispare antes de que el documento esté listo) .

Aquí hay un violín simple que funciona con un botón para quitar la superposición. Usted debe ser capaz de ir desde allí :) http://jsfiddle.net/3quN5/

Fuente

2012-05-24 19:00:19 adamdehaven

jQuery carga de páginas HTML enteras con spinner

Respuesta

Cuestiones relacionadas