Ho una sezione sul nostro sito web che si carica abbastanza lentamente mentre sta effettuando alcune chiamate intense.
Hai idea di come posso divdire qualcosa di simile al "caricamento" da mostrare mentre la pagina si prepara e poi svanisce quando tutto è pronto?
Risposte:
Ne ho avuto bisogno e dopo alcune ricerche mi è venuto in mente questo ( necessario jQuery ):
Innanzitutto, subito dopo il <body>tag aggiungi questo:
<div id="loading">
<img id="loading-image" src="images/ajax-loader.gif" alt="Loading..." />
</div>Quindi aggiungi la classe di stile per div e immagine al tuo 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;
}Quindi, aggiungi questo javascript alla tua pagina (preferibilmente alla fine della tua pagina, </body>ovviamente prima del tag di chiusura ):
<script>
$(window).load(function() {
$('#loading').hide();
});
</script>Infine, regola la posizione dell'immagine di caricamento e quella background-colourdel div di caricamento con la classe di stile.
Questo è tutto, dovrebbe funzionare bene. Ma ovviamente devi avere ajax-loader.gifqualcosa da qualche parte. Omaggi qui . (Fare clic con il tasto destro del mouse> Salva immagine con nome ...)
$('#loading').hide();ad ogni caricamento della pagina.
Questo script aggiungerà un div che copre l'intera finestra mentre la pagina viene caricata. Mostrerà automaticamente uno spinner di caricamento solo CSS. Attenderà fino al termine del caricamento della finestra (non del documento), quindi attenderà alcuni secondi opzionali.
Codice caricatore CSS da 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)si attiva al termine del caricamento di tutti gli oggetti DOM, inclusi immagini, script e persino iframe. Se vuoi aspettare il caricamento di un'immagine specifica, usa$('#imageId').on("load", handler)
$( "#loadingDiv" ).remove();con $( "#loadingDiv" ).hide();e aggiungi $( "#loadingDiv" ).show();prima setTimeout(removeLoader, 2000);. Ho rimosso il div per rendere la pagina più leggera, ma questa correzione la rende riutilizzabile.
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> Immagine di caricamento della pagina con l' effetto di dissolvenza più semplice creato in JS:
Ho un'altra soluzione semplice per questo che ha funzionato perfettamente per me.
Prima di tutto, crea un CSS con il nome della classe Lockon che è sovrapposizione trasparente insieme al caricamento GIF come mostrato di seguito
.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;
}Ora dobbiamo creare il nostro div con questa classe che copre l'intera pagina come overlay ogni volta che la pagina viene caricata
<div id="coverScreen" class="LockOn">
</div>Ora dobbiamo nascondere questa schermata di copertina ogni volta che la pagina è pronta e in modo da poter limitare l'utente a fare clic / attivare qualsiasi evento fino a quando la pagina è pronta
$(window).on('load', function () {
$("#coverScreen").hide();
});La soluzione sopra andrà bene ogni volta che la pagina viene caricata.
Ora la domanda è dopo che la pagina è stata caricata, ogni volta che facciamo clic su un pulsante o un evento che richiederà molto tempo, dobbiamo mostrarlo nell'evento clic del client come mostrato di seguito
$("#ucNoteGrid_grdViewNotes_ctl01_btnPrint").click(function () {
$("#coverScreen").show();
});Ciò significa che quando si fa clic su questo pulsante di stampa (che impiegherà molto tempo a fornire il rapporto) mostrerà la nostra schermata di copertina con GIF che fornisce il 
risultato e una volta che la pagina è pronta sopra la finestra al caricamento, la funzione si attiva e che nasconde la schermata di copertina una volta che lo schermo è completamente caricato.
Predefinito il contenuto display:nonee quindi un gestore eventi che lo imposta display:blocko simile dopo che è stato caricato completamente. Quindi avere un div impostato su display:block"Caricamento" al suo interno e impostarlo su display:nonenello stesso gestore di eventi di prima.
Bene, questo dipende in gran parte da come stai caricando gli elementi necessari nella "chiamata intensiva", il mio pensiero iniziale è che stai facendo quei carichi tramite Ajax. In tal caso, è possibile utilizzare l'opzione 'beforeSend' ed effettuare una chiamata Ajax in questo modo:
$.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);
}
});EDIT
Vedo, in quel caso, usare una delle 'display:block'/'display:none'opzioni sopra in combinazione con $(document).ready(...)jQuery è probabilmente la strada da percorrere. La $(document).ready()funzione attende il caricamento dell'intera struttura del documento prima dell'esecuzione ( ma non attende il caricamento di tutti i supporti ). Faresti qualcosa del genere:
$(document).ready( function() {
$('table#with_slow_data').show();
$('div#loading image or text').hide();
});beforeSende successad ogni chiamata ajax.
Il mio blog funzionerà al 100 percento.
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">Crea un <div>elemento che contenga il tuo messaggio di caricamento, assegna <div>un ID e, una volta terminato il caricamento del contenuto, nascondi <div>:
$("#myElement").css("display", "none");... o in semplice JavaScript:
document.getElementById("myElement").style.display = "none";$("#myElement").hide()facile per gli occhi?
Ecco il jQuery che ho finito per usare, che monitora tutto l'avvio / arresto di Ajax, quindi non è necessario aggiungerlo ad ogni chiamata Ajax:
$(document).ajaxStart(function(){
$("#loading").removeClass('hide');
}).ajaxStop(function(){
$("#loading").addClass('hide');
});CSS per caricamento container e contenuti (principalmente dalla risposta di mehyaa), nonché una hideclasse:
#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>Basato sulla risposta di @mehyaa, ma molto più breve:
HTML (subito dopo <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, poiché lo sto già utilizzando):
$(window).load(function() {
$('#loading').remove();
});hide()l'elemento piuttosto che per remove()esso, in modo da poterlo riutilizzare.
Questo sarà sincronizzato con una chiamata api. Quando la chiamata api viene attivata, viene visualizzato il caricatore. Quando la chiamata API ha esito positivo, il caricatore viene rimosso. Può essere utilizzato per il caricamento della pagina o durante una chiamata 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); }
}per drupal nel tuo file custom_theme.theme tema
function custom_theme_preprocess_html(&$variables) {
$variables['preloader'] = 1;
}Nel file html.html.twig dopo saltare il collegamento al contenuto principale nel corpo
{% 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 %} nel file 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;
}