jQuery caricamento pagina HTML completo con spinner

Sto provando a qualcosa di semplice: crea uno script jQuery che attenderà di mostrare l'intera pagina, inclusi tutti i DIV, il testo e le immagini. Mentre la pagina si sta caricando, invece di mostrare parti della pagina mi piacerebbe mostrare un'immagine GIF ruotante, e quando l'intera pagina viene caricata possiamo sbiadire il contenuto della pagina nella finestra del browser.jQuery caricamento pagina HTML completo con spinner

Ci sono molti script da caricare con una richiesta Ajax in un contenitore DIV - ma questo è diverso. Questo mostrerà una GIF rotante mentre viene caricata una pagina HTML. Ogni aiuto è apprezzato

Questo tipo di script funziona solo su richieste Ajax

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

fonte

2012-05-24 user1317510

$(document).ready(...) si attiva non appena viene caricato il DOM. Questo è presto. Si sould utilizzare $(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... -->

un'occhiata a questo jsFiddle: http://jsfiddle.net/gK9wH/9/

fonte

2012-05-24 17:54:47 AvL

sì, il documento pronto si attiva troppo presto e alcuni elementi potrebbero essere a metà del rendering nella finestra del browser e lo mostrerà ... quindi come possiamo mostrare prima lo spinner e poi nasconderlo - se stiamo aspettando la finestra da caricare? – user1317510

Vedi modifica ... o direttamente qui: http://jsfiddle.net/gK9wH/ – AvL

sì. Vedo che funziona! Ma non vedo lo spinner. forse lo spinner è nascosto dallo scroll della finestra di JSFiddle? – user1317510

penso che il modo migliore sarebbe di avere una 'copertura' div che coprirà l'intera pagina, mentre viene caricato. Sarebbe opaco e conterrà la tua GIF.

Il seguente sarebbe poi nascondere il div una volta che la pagina è stata caricata:

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

Il seguente renderebbe il div le dimensioni della pagina:

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

fonte

2012-05-24 17:48:27

Prima vuoi dire tutto nel tra i tag del corpo? Il modo migliore per fare un regalo rotante è aggiungere una classe che definisca la gif come nessuna ripetuta e centrata. Rimuove la classe quando la pagina è pronta per essere mostrata.

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

Questa è sempre la migliore tecnica perché se si presenta qualcosa quindi si tenta di aggiungere il gif attraverso un DOM Inoltre alcuni browser non lo faranno perché la pagina è stata presentata.

fonte

2012-05-24 17:53:39 Elliott

quindi, come faremmo esattamente? Quello che voglio dire è ... come facciamo a sapere quando vengono caricati tutti i byte ed è ora di rimuovere la classe di caricamento e svanire nella parte principale del corpo? – user1317510

Coprirei l'intera pagina con una sovrapposizione e quindi rimuovere la sovrapposizione una volta caricata la pagina. Puoi modificare questo per mostrare anche un caricamento.gif se desideri. Ecco un esempio:

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); 
});

Avrete bisogno di modificare questo in modo che carica la sovrapposizione non appena la pagina è richiesta (modificare la chiamata $(showOverlay); in modo che si attivi prima che il documento sia pronto .

Ecco un semplice violino funzionante con un pulsante per rimuovere la sovrapposizione. Dovresti poter andare da lì :) http://jsfiddle.net/3quN5/

fonte

2012-05-24 19:00:19 adamdehaven

jQuery caricamento pagina HTML completo con spinner

risposta

Problemi correlati