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?
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
quelle
$(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();vorsetTimeout(removeLoader, 2000);. Ich hatte das div entfernt, um die Seite leichter zu machen, aber dieses Update macht es wiederverwendbar.Seitenladen Bild mit einfachsten fadeout Effekt in JS erstellt:
quelle
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
Jetzt müssen wir unser div mit dieser Klasse erstellen, die die gesamte Seite als Overlay abdeckt, wenn die Seite geladen wird
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
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
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.
quelle
Standardmäßig wird der Inhalt auf
display:noneeinen Ereignishandler gesetzt, der ihndisplay:blocknach dem vollständigen Laden auf oder ähnlich setzt . Haben Sie dann ein Div, das aufdisplay:block"Loading" gesetzt ist, und setzen Sie esdisplay:noneim selben Event-Handler wie zuvor.quelle
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:
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:quelle
beforeSendundsuccesszu jedem Ajax-Anruf zu vermeiden .Mein Blog wird zu 100 Prozent funktionieren.
quelle
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>:... oder in einfachem JavaScript:
quelle
$("#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:
CSS für den Ladecontainer und den Inhalt (hauptsächlich aus Mehyaas Antwort) sowie eine
hideKlasse:HTML:
quelle
Basierend auf @mehyaa Antwort, aber viel kürzer:
HTML (direkt danach
<body>):CSS:
Javascript (jQuery, da ich es bereits benutze):
quelle
hide()das Element als fürremove()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.
CSS
quelle
für drupal in Ihrer Themendatei custom_theme.theme
In der Datei html.html.twig nach dem Überspringen des Hauptinhaltslinks im Hauptteil
in CSS-Datei
quelle