Ich habe einen Abschnitt auf unserer Website, der ziemlich langsam geladen wird, da er einige intensive Anrufe tätigt.
Irgendeine Idee, wie ich etwas dazu bringen kann, divetwas Ähnliches wie "Laden" zu sagen, um es anzuzeigen, während sich die Seite selbst vorbereitet und dann verschwindet, wenn alles fertig ist?
Antworten:
Ich habe das gebraucht und nach einigen Recherchen habe ich mir das ausgedacht ( jQuery benötigt):
Fügen Sie zunächst direkt nach dem <body>Tag Folgendes hinzu:
<div id="loading">
<img id="loading-image" src="images/ajax-loader.gif" alt="Loading..." />
</div>
Fügen Sie dann die Stilklasse für div und image zu Ihrem CSS hinzu:
#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;
}
Fügen Sie dann dieses Javascript zu Ihrer Seite hinzu (vorzugsweise am Ende Ihrer Seite, </body>natürlich vor Ihrem schließenden Tag):
<script>
$(window).load(function() {
$('#loading').hide();
});
</script>
Passen Sie abschließend die Position des Ladebilds und background-colourdes Ladebereichs mit der Stilklasse an.
Das ist es, sollte gut funktionieren. Aber natürlich muss man ajax-loader.gifirgendwo einen haben. Werbegeschenke hier . (Rechtsklick> Bild speichern unter ...)
$('#loading').hide();bei jedem Seitenaufruf etwas hinzugefügt wird .
Dieses Skript fügt ein Div hinzu, das das gesamte Fenster beim Laden der Seite abdeckt. Es wird automatisch ein Nur-CSS-Ladespinner angezeigt. Es wird gewartet, bis das Laden des Fensters (nicht des Dokuments) abgeschlossen ist, und es wird optional einige Sekunden länger gewartet.
CSS-Loader-Code von 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)wird ausgelöst, wenn alle DOM-Objekte geladen wurden , einschließlich Bilder, Skripte und sogar Iframes. Wenn Sie auf das Laden eines bestimmten Bildes warten möchten, verwenden Sie$('#imageId').on("load", handler)
$( "#loadingDiv" ).remove();durch $( "#loadingDiv" ).hide();und hinzufügen $( "#loadingDiv" ).show();vor setTimeout(removeLoader, 2000);. Ich hatte das div entfernt, um die Seite leichter zu machen, aber dieses Update macht es wiederverwendbar.
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> Seitenladen Bild mit einfachsten fadeout Effekt in JS erstellt:
Ich habe eine andere unten einfache Lösung dafür, die perfekt für mich funktioniert hat.
Erstellen Sie zunächst ein CSS mit dem Namen Lockon class, das eine transparente Überlagerung darstellt, und laden Sie GIF wie unten gezeigt
.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;
}
Jetzt müssen wir unser div mit dieser Klasse erstellen, die die gesamte Seite als Overlay abdeckt, wenn die Seite geladen wird
<div id="coverScreen" class="LockOn">
</div>
Jetzt müssen wir diesen Deckbildschirm ausblenden, wenn die Seite fertig ist, damit der Benutzer nicht auf ein Ereignis klicken / es auslösen kann, bis die Seite fertig ist
$(window).on('load', function () {
$("#coverScreen").hide();
});
Die obige Lösung ist in Ordnung, wenn die Seite geladen wird.
Jetzt ist die Frage, nachdem die Seite geladen wurde, wann immer wir auf eine Schaltfläche oder ein Ereignis klicken, das lange dauern wird, müssen wir dies im Client-Klick-Ereignis wie unten gezeigt anzeigen
$("#ucNoteGrid_grdViewNotes_ctl01_btnPrint").click(function () {
$("#coverScreen").show();
});
Das heißt, wenn wir auf diese Druckschaltfläche klicken (was lange dauert, bis der Bericht erstellt wird), wird unser Titelbildschirm mit GIF angezeigt, das das 
Ergebnis liefert. Sobald die Seite über den Fenstern zum Laden bereit ist, wird die Funktion ausgelöst und der Titelbildschirm wird ausgeblendet Sobald der Bildschirm vollständig geladen ist.
Standardmäßig wird der Inhalt auf display:noneeinen Ereignishandler gesetzt, der ihn display:blocknach dem vollständigen Laden auf oder ähnlich setzt . Haben Sie dann ein Div, das auf display:block"Loading" gesetzt ist, und setzen Sie es display:noneim selben Event-Handler wie zuvor.
Nun, dies hängt weitgehend davon ab, wie Sie die Elemente laden, die für den "intensiven Aufruf" benötigt werden. Mein erster Gedanke ist, dass Sie diese Ladevorgänge über Ajax ausführen. Wenn dies der Fall ist, können Sie die Option 'beforeSend' verwenden und einen Ajax-Aufruf wie folgt ausführen:
$.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);
}
});
BEARBEITEN
Ich sehe in diesem Fall, dass die Verwendung einer der 'display:block'/'display:none'oben genannten Optionen in Verbindung mit $(document).ready(...)von jQuery wahrscheinlich der richtige Weg ist. Die $(document).ready()Funktion wartet vor der Ausführung auf das Laden der gesamten Dokumentstruktur (wartet jedoch nicht auf das Laden aller Medien ). Sie würden so etwas tun:
$(document).ready( function() {
$('table#with_slow_data').show();
$('div#loading image or text').hide();
});
beforeSendund successzu jedem Ajax-Anruf zu vermeiden .
Mein Blog wird zu 100 Prozent funktionieren.
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">Erstellen Sie ein <div>Element, das Ihre Lademeldung enthält, geben Sie <div>eine ID ein. Wenn Ihr Inhalt vollständig geladen ist, verbergen Sie Folgendes <div>:
$("#myElement").css("display", "none");... oder in einfachem JavaScript:
document.getElementById("myElement").style.display = "none";$("#myElement").hide()das für die Augen nicht einfacher?
Hier ist die jQuery, die ich letztendlich verwendet habe und die alle Ajax-Starts / Stopps überwacht, sodass Sie sie nicht zu jedem Ajax-Aufruf hinzufügen müssen:
$(document).ajaxStart(function(){
$("#loading").removeClass('hide');
}).ajaxStop(function(){
$("#loading").addClass('hide');
});CSS für den Ladecontainer und den Inhalt (hauptsächlich aus Mehyaas Antwort) sowie eine hideKlasse:
#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>Basierend auf @mehyaa Antwort, aber viel kürzer:
HTML (direkt danach <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, da ich es bereits benutze):
$(window).load(function() {
$('#loading').remove();
});hide()das Element als für remove()es, damit Sie es wiederverwenden können.
Dies erfolgt synchron mit einem API-Aufruf. Wenn der API-Aufruf ausgelöst wird, wird der Loader angezeigt. Wenn der API-Aufruf erfolgreich ist, wird der Loader entfernt. Dies kann entweder zum Laden von Seiten oder während eines API-Aufrufs verwendet werden.
$.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); }
}für drupal in Ihrer Themendatei custom_theme.theme
function custom_theme_preprocess_html(&$variables) {
$variables['preloader'] = 1;
}In der Datei html.html.twig nach dem Überspringen des Hauptinhaltslinks im Hauptteil
{% 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 %} in CSS-Datei
#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;
}