Der Classic-Editor zeichnet sich durch Stabilität und Zuverlässigkeit aus, was für professionellen Anwender von Bedeutung ist.
Werbung
Mehr schaffen in weniger Zeit – Der Advanced Editor für kreative Köpfe.
Optimieren Sie Ihre Bearbeitung: Advanced Editor Tools
Mit dem Advanced Editor können Designer und Content Creatoren kreative Ideen umsetzten.
Der 'Page Loading Effect' oder sogenannte 'Preloader' ist ein visueller Effekt, der während des Ladevorgangs einer Website angezeigt wird. Der 'Page Loading Effect' wird oft als 'Preloader' bezeichnet und ist in diesem Zusammenhang dasselbe. Allerdings ist die Bezeichnung 'Preloader' eigentlich nicht ganz korrekt, da hier nicht wirklich etwas vorgeladen wird. Es handelt sich vielmehr um den visuellen Effekt, der beim Laden einer Seite auftritt, um den Benutzer darüber zu informieren, dass die Seite noch geladen wird.
Übergangsanimationen können dazu beitragen, dass die Website flüssig und professionell wirkt. Obwohl ein zu langsamer Seitenaufbau ein Hinweis darauf sein kann, dass etwas falsch läuft, kann ein gut gestalteter Page Loading Effect dazu beitragen, die Wartezeit für den Benutzer zu verkürzen und ein besseres Erlebnis zu bieten. Darüber hinaus können Übergangsanimationen zwischen den Seiten ein nahtloses Benutzererlebnis gewährleisten, falls es dem Design entspricht.
Auch der Webmaster kann von "Page Loading Effects" profitieren, da sie während der Aktivität sehr entspannend wirken können.
Inhaltsverzeichnis
Page Loading Effects sind keine Hexerei
Meist werden diese Plug-ins als Preloader bezeichnet, obwohl es sich dabei nicht um einen Preloader handelt. Der Page Loading Effect wird lediglich als Vorschaltung aktiviert und deaktiviert, sobald die Seite vollständig geladen ist.
Anstelle von Text kann auch ein Spinner an der Stelle eingefügt werden, wo es heißt <div class="pageLoaderText">Einen Moment bitte<span class="pageLoaderDots"></span></div>.
Das Beispiel ist jedoch nur ein Anfang eines Page Loading Effects. Zur Vollendung gehören noch viele weitere Schritte. Daher empfehle ich, die verfügbaren Plug-ins zu nutzen, um das Page Loading Effect auf der Website optimal umzusetzen.
Plug-ins zum Page Loading Effects
Die Auswahl von Page Loading Effects
Die Auswahl …
Es kann schwierig sein, ein Plug-in zu finden, das nur für den Erstaufruf der Website aktiviert wird. Dies kann jedoch mit Cookies erreicht werden.
Es ist auch möglich, die Plugin-Einstellungen so anzupassen, dass sie nur auf der Startseite der Website angewendet werden. Dies ist bei den meisten Plug-ins möglich. Alternativ können die Loading Effects auf jeder Seite beim Erstaufruf aktiviert werden.
Es gibt viele verschiedene Plug-ins zur Auswahl, und die Beliebtheit eines Plug-ins hängt nicht unbedingt von der Anzahl der aktiven Installationen ab. Ein Plug-in mit 70.000 Benutzern kann fast genauso gut sein wie eines mit nur 400 aktiven Installationen. 🐻
Plug-in-Details auf einen Blick
Die Reihenfolge der Plug-ins folgt in etwa ihrer Dateigröße.
Die Anzahl der aktiven Installationen gibt einen Hinweis auf die Beliebtheit des jeweiligen Plug-ins.
Es gibt auch Plug-ins, die nur beim Erstaufruf der Website Page Loading Effects anzeigen können.
Informationen zu den Farbeinstellungen der Loading Effects sind ebenfalls enthalten.
Einige Plug-ins sind sich in ihren Funktionen sehr ähnlich.
1. Datei-größe
2. Instal-lationen
3. First visit
4. Back-ground
5. Sind ähnlich
Preloader
68 KB
10.000+
Ja
Ja
🟠
Page Loading Effects
70 KB
3.000+
Ja
Ja
🟣
Easy Lite Preloader
90 KB
400+
Ja
🟠
WP Smart Preloader
395 KB
8.000+
m. extra CSS
🟣
Preloader Plus
425 KB
50.000+
Ja
Ja
🔵
Loftloader
459 KB
70.000+
Ja / Pro
Ja
🔵
Einige Plug-ins weisen ähnliche Funktionen auf, wie beispielsweise Preloader und Easy Lite Preloader. Bei diesen beiden Plug-ins ist es schwer, eine Entscheidung zu treffen, da es auf die persönlichen Vorlieben ankommt.
Page Loading Effects und WP Smart Preloader sind ebenfalls ähnlich.
Preloader Plus und Loftloader sind weitere ähnliche Plug-ins. Die Pro-Version von Loftloader bietet noch mehr Funktionen.
Preloader
Preloader, Dateigröße 68 KB. 10.000+ aktive Installationen.
Funktioniert mit jQuery und CSS3.
Keine Vorlagen außer dem Standard GIF. Anderes Bild bzw. GIFs sind selbst zu erstellen.
Benutzerdefinierte Hintergrundfarbe.
Anzeigendauer und so sind der Einstellungen nicht definierbar und nur direkt in der Datei the-preloader/js/preloader-script.js festzulegen, welches nach Plug-in-Update zu wiederholen sein wird.
Die Bildgröße ist auch dirket in der Datei the-preloader/preloader.php zu editieren:
Ohne der Option nur zum Erstaufruf den Loading Effects zeigen, aber Displays des mehreren u. a. nur in WooCommerce zeigen.
Zur Funktion ist der Theme header.php nach <body> das HTML-Element einzutragen:
<div id="wptime-plugin-preloader"></div>
Preloader Element: Öffne die 'header.php'-Datei des Themes und nach 'body' das HTML-Element einfügen. (Im Beispiel 20/14)
Das ist also ein Plug-in für selbst erstelltes Icon oder GIF bspw. der eignen Website das Emblem zu zeigen. – oder so PRELOADERS
Im Zusammenhang mit dem Dunkelmodus und Night Eye gab es ein Experiment in der settings.php-Datei des Preloader-Plug-ins bezüglich der Browser Edge und Firefox. Ursprünglich war die Idee, dass der Preloader auf der Homepage auch im Dunkelmodus erscheinen sollte, jedoch scheint der Code nicht viel zu bewirken.
function WPTime_preloader_settings_page(){ // settings page function
if( get_option('wptpreloader_bg_color') ){
$background_color = get_option('wptpreloader_bg_color');
}else{
$background_color = '#FFFFFF'; // Standardfarbe
}
// Prüfe, ob Night Eye aktiv ist und setze die Hintergrundfarbe entsprechend
$night_eye_active = function_exists('nighteyeplgn_get_state') && nighteyeplgn_get_state() === 'active';
$night_eye_bg_color = $night_eye_active ? '#862D1C' : $background_color;
if( get_option('wptpreloader_image') ){
$preloader_image = get_option('wptpreloader_image');
}else{
$preloader_image = plugins_url( '/images/preloader.GIF', __FILE__ );
}
$get_theme = wp_get_theme();
$theme_name = strtolower( $get_theme->get('Name') );
$remove_d = str_replace(" ", "-", $theme_name);
$get_theme_name = rtrim($remove_d, "-");
if( is_ssl() ){
$header_file_url = admin_url("theme-editor.php?file=header.php&theme=$get_theme_name", "https");
}else{
$header_file_url = admin_url("theme-editor.php?file=header.php&theme=$get_theme_name", "http");
}
$preloader_element = esc_html('now after <body> insert Preloader HTML element: <div id="wptime-plugin-preloader"></div>');
// Hier weiterer Code zur Darstellung der Einstellungen...
}
Auch Tests mir CSS wurden durchgeführt, auch erfolglos.
Page Loading Effects, Dateigröße 70 KB. 3.000+ aktive Installationen. – super Sache.
… da so weitere Demo. Ein leichtes WP-Plugin, das das Laden animierter Grafiken anzeigt, bis die Seite vollständig geladen ist.
Die Einstellungen sind über das Hauptmenü des Dashboards aufzurufen:
4 Vorlagen, dazu auch 'Benutzerdefinierte Einstellungen'.
Page Loading Effects die Einstellungen
Das mit den Cookies für die Option "nur Erstaufruf den Loading Effect zeigen" ist hervorragend gelöst!
Die maximale Dauer des Seitenladevorgangs ist sehr nützlich, falls der Browser die Seite weiterhin lädt, obwohl sie bereits angezeigt wird. Andernfalls würde der Effekt nach bestmöglicher Zeit ausgeblendet.
Dies ermöglicht es dem Webmaster, die "Page Loading Effects" bei Wartungsarbeiten zu deaktivieren, wenn der Effekt als störend empfunden wird. In diesem Fall wird es jedoch auch für den Besucher deaktiviert.
Im Zusammenhang mit dem Dunkelmodus möchte ich meine Unterstützung für WP Smart Preloader zum Ausdruck bringen. Es ist der Preloader, die hier auf meiner Website nahtlos mit dem Dunkelmodus harmonieren. Wenn der Dunkelmodus aktiviert ist, gibt für Browser Chrome, Edge, Safari, Opera und Brave keine störenden Aufblitzeffekte beim Neuladen oder Navigieren auf der Website. Auch die Farbgebung des Overlays durch den Dunkelmodus wird in Neuladung nahtlos übernommen, außerdem ist er von wegen PageSpeed sehr performant.
Worum geht es dabei: Im Dunkelmodus in Neuladung und Navigieren auf der Website sollte es kein Aufblitzen geben und das Overlay des Preloaders sollte nahtlos mit der des Dunkelmodus einhergehen.
WP Smart Preloader – Lösung für Firefox und Brave
Das Folgende dient lediglich als Dokumentation, welches Problem mit der Version 1.15.3 (27.10.2024) behoben wurde.
Infolge einer direkten Anpassung in der wsp-main-script.js konnte das Problem universell gelöst werden.
Hiermit sollte der Smart-Preloader in allen Browsern anstanslos laden (inklusive von Beitragsvorschau).
Plug-in Update ist das natürlich zu erneuern. Vielleicht hat mal jemand Zeit und Liebe …
Wir haben dem Team von CatchSquare einen Vorschlag unterbreitet, und nach drei Tagen wurde das WP Smart Preloader-Update veröffentlicht. Damit ist das Problem des 'Unendlichen Ladens in Firefox' nun behoben – dank der Unterstützung von ChatGPT.
Problemloses Laden mit WP Smart Preloader und Firefox
Das in „Detail“ ist nur eine Aufzeichnung und war nicht immer erfolgreich:
Details
Mit dem Browser Firefox gab es Probleme. Abgesehen von dem anfänglichen Endlosladeproblem trat nach dessen Behebung ein neues Problem auf: "Website-Neuladen > Website blitzt auf > Preloader > Website sichtbar". Zum Einen konnte das Problem annähernd durch die Entwicklung mit ChatGPT-3.5 beheben werden. Also mehr das markante Problem des Hängenbleibens, welches auch in der Version 1.15.2 (Anfang 2024) nicht behoben wurde. Das Problem tritt häufig nicht sofort auf, sondern erst nach dem Navigieren durch mehrere Seiten. Es äußert sich ebenda durch das Hängenbleiben des Preloaders ohne den Code.
Der folgende Code ist in "1. Smart Preloader für Firefox" unterteilt, der aus dem Support des Plug-ins stammt, und "2. Browser-spezifisch für Firefox", den wir mit ChatGPT entwickelt haben. Beide Codes sind relevant, aber wie gesagt mit Vorbehalt. Zum Besuch der Website ist dem Ladevogang immer ein weißer Bildschirm gebleiben es beseitigt lediglich das Hängenbleiben, also der Übergang konnte lediglich etwas verbessert werden.
Anmerkung: Der Code konnte nicht effektiv in einer einzigen Aktion kombiniert werden, da die beiden Aktionen separat innerhalb von wp_footer ausgeführt werden müssen, was dazu beiträgt, Zeitkonflikte zu reduzieren. Zuerst wird der Preloader ausgeblendet und dann wird die Sichtbarkeit der Website basierend auf dem Browsertyp gesteuert. Dieser Ansatz minimiert die Wahrscheinlichkeit zeitlicher Probleme.
Hier ist der vollständige Code, der hier mal in Anwendung war:
Smart Preloader für Firefox (Page Loading Effect mit Verzögerung): Dieser Code stellt sicher, dass der Preloader im Firefox-Browser nicht hängen bleibt und ein reibungsloses Page Loading Effect ermöglicht wird.
Browser-spezifisch für Firefox (Website-Versteckung mit Verzögerung): Dieser Code verhindert das Flashen im Firefox-Browser, indem die Website vor dem vollständigen Laden versteckt wird. – so derform funktioniert das mal, mit Vorbehalt!
JavaScript für die functions.php:
/* 1. Smart Preloader für Firefox */
add_action('wp_footer', function() {
?>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Überprüfen, ob es sich um den Firefox-Browser handelt
var isFirefox = typeof InstallTrigger !== 'undefined';
if (isFirefox) {
// Führe den Page Loading Effect nur im Firefox-Browser aus
setTimeout(function() {
var loader = document.querySelector('.smart-page-loader');
if (loader) {
loader.style.transition = 'opacity 0.5s';
loader.style.opacity = 0;
setTimeout(function() {
loader.style.display = 'none';
}, 500); // Dauer der Ausblendung
}
}, 1500); // Verzögerung vor dem Ausblenden
}
});
</script>
<?php
});
/* 2. Browser-spezifisch für Firefox */
add_action('wp_footer', function() {
?>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Überprüfen, ob es sich um den Firefox-Browser handelt
var isFirefox = typeof InstallTrigger !== 'undefined';
if (isFirefox) {
// Füge eine Klasse hinzu, um die Website zu verstecken
document.body.classList.add('hidden-site');
// Entferne die Klasse nach einer festen Verzögerung, bevor die Seite vollständig geladen ist
setTimeout(function() {
document.body.classList.remove('hidden-site');
}, 500); // Verzögerungszeit (in Millisekunden)
}
});
</script>
<?php
});
Die Verzögerungszeiten sind standardmäßig (in Millisekunden), diese können bei Bedarf angepasst werden.
Mit dem obigen Code (2) und diesem CSS sollte es funktionieren:
/* CSS code to hide the page */
.hidden-site {
visibility: hidden !important;
opacity: 0 !important;
}
Beide Beauty-Features können so genutzt werden, oder anders?
WP Smart Preloader für Firefox vollständig ausschließen?
Nachdem festgestellt wurde, dass auch der Brave-Browser ähnliche Probleme wie Firefox aufweist und sich dieser nicht zuverlässig ansprechen ließ, wurde entschieden, das Unterscheiden der Browser für den Preloader aufzugeben.
Details
Verschiedene Tests wurden durchgeführt auch mit zwei Preloader-Plugins: Smart Preloader und Page Loading Effects. Der Smart Preloader ist für die Browser Chrome, Edge, Safari, Opera und Brave zuständig, während er für Firefox durch spezifischen Code ausgeschlossen wird. Umgekehrt verhält es sich bei Page Loading Effects.
Der WP Smart Preloader funktioniert in diesen Browsern sehr zufriedenstellend. Genauso wie das Plug-in Page Loading Effects (Preloader), welches für Firefox in Anwendung war.
1. 'Page Loading Effects' für Firefox zulassen und andere Browser ausschließen
… page-loading-effects > page-loading-effects.php, direkt nach dem <?php-Tag:
// Überprüfen, ob es sich um den Firefox-Browser handelt
if (strpos($_SERVER['HTTP_USER_AGENT'], 'Firefox') !== false && strpos($_SERVER['HTTP_USER_AGENT'], 'IEMobile') === false) {
// Code ausführen, wenn es sich um Firefox handelt
} else {
// Beendet die Ausführung für andere Browser (inklusive Safari)
return;
}
Firefox kann wirklich problematisch sein, besonders wenn es um das Caching geht. Selbst der Preloader hat keine Chance, sich zu zeigen, wenn er einmal gecacht wird, und das ist nicht immer von Vorteil. Daher haben wir statt des vorherigen Codes Folgendes implementiert:
/* Überprüfen, ob es sich um den Firefox-Browser handelt */
if (strpos($_SERVER['HTTP_USER_AGENT'], 'Firefox') !== false && strpos($_SERVER['HTTP_USER_AGENT'], 'IEMobile') === false) {
// Cache-Control-Header setzen, um Caching zu verhindern
header("Cache-Control: no-cache, no-store, must-revalidate"); // HTTP 1.1
header("Pragma: no-cache"); // HTTP 1.0
header("Expires: 0"); // Proxies
// Code ausführen, wenn es sich um Firefox handelt
} else {
// Beendet die Ausführung für andere Browser (inklusive Safari)
return;
}
Erklärung der Cache-Control-Header:
Cache-Control: no-cache, no-store, must-revalidate: Diese Anweisung sorgt dafür, dass der Browser die Datei nicht im Cache speichert und sie bei jedem Aufruf vom Server anfordert. Dies verhindert, dass alte Versionen des Preloaders angezeigt werden, was insbesondere bei Änderungen oder Aktualisierungen wichtig ist.
Pragma: no-cache: Dies ist eine HTTP/1.0-Anweisung, die ähnliche Funktionen wie Cache-Control erfüllt und auch ältere Browser berücksichtigt.
Expires: 0: Diese Anweisung weist darauf hin, dass die Datei sofort als abgelaufen betrachtet wird, was das Caching weiter einschränkt.
Die Möglichkeit der Einstellungen ist mit dem Code nicht mehr gegeben, da durch den Ausschluss aller Browser außer in Firefox im Dashbord nicht visuell ist.
Wenn es störend ist, dass die Einstellungen im Dashboard für alle Browser außer dem Firefox-Browser nicht mehr sichtbar sind, hat der Test des Codes eventuell Erfolg. Unserer Weibsite brachte das nichts, da hiermit der Cache-Ausschluss in Firefox nicht mehr funktionierte:
// Überprüfen, ob sich der Benutzer im Admin-Bereich befindet
if (is_admin()) {
// Cache-Control-Header setzen, um Caching zu verhindern
header("Cache-Control: no-cache, no-store, must-revalidate"); // HTTP 1.1
header("Pragma: no-cache"); // HTTP 1.0
header("Expires: 0"); // Proxies
} else {
// Überprüfen, ob es sich um den Firefox-Browser handelt
if (strpos($_SERVER['HTTP_USER_AGENT'], 'Firefox') !== false && strpos($_SERVER['HTTP_USER_AGENT'], 'IEMobile') === false) {
// Cache-Control-Header setzen, um Caching zu verhindern
header("Cache-Control: no-cache, no-store, must-revalidate"); // HTTP 1.1
header("Pragma: no-cache"); // HTTP 1.0
header("Expires: 0"); // Proxies
} else {
// Beendet die Ausführung für andere Browser (inklusive Safari)
return;
}
}
Plug-in Update ist das natürlich zu erneuern. Im Test mit Code in der functions.php ist das nicht funktionell, wird also zu spät ausgeführt. Selbst in mu-plugins, ist folgendes nicht funktionell:
<?php
/*
Plugin Name: Cache Control for Firefox Preloader
Description: Set Cache-Control headers for Firefox to prevent caching of the page-loading-effects.php.
Version: 1.0
Author: Dein Name
*/
// Überprüfen, ob es sich um den Firefox-Browser handelt
add_action('init', function() {
// Überprüfen, ob es sich um den Firefox-Browser handelt
if (strpos($_SERVER['HTTP_USER_AGENT'], 'Firefox') !== false && strpos($_SERVER['HTTP_USER_AGENT'], 'IEMobile') === false) {
// Überprüfen, ob die 'page-loading-effects.php' geladen wird
if (strpos($_SERVER['SCRIPT_NAME'], 'page-loading-effects.php') !== false) {
// Cache-Control-Header setzen, um Caching zu verhindern
header("Cache-Control: no-cache, no-store, must-revalidate"); // HTTP 1.1
header("Pragma: no-cache"); // HTTP 1.0
header("Expires: 0"); // Proxies
}
}
});
Weiter, ein zusätzlicher Code in der ple.preloader.min.js wäre hier nicht angebracht und würde anstelle des obigen Codes sogar zu Fehlern führen.
2. Für Firefox der Ausschluss vom 'Smart-Preloader'
2.1 Nunmehr für Firefox der Ausschluss vom Smart-Preloader, das erfolgt in der wp-preloader.php, direkt nach dem <?php-Tag:
// Überprüfen, ob es sich um den Firefox-Browser handelt
if ( !wp_doing_ajax() && !is_admin() ) {
// Überprüfen, ob es sich um den Firefox-Browser handelt
if (strpos($_SERVER['HTTP_USER_AGENT'], 'Firefox') !== false) {
return; // Beendet die Ausführung der Datei, wenn es sich um Firefox handelt
}
}
Plug-in Update ist das natürlich zu erneuern. Im Test mit Code für die functions.php ist das nicht funktionell, wird also zu spät ausgeführt.
2.2 Caches könnten Probleme machen, daher kommt nun der springende Punkt. Folgendes dem Smart Preloader in der wsp-main-script.js einfügen (wp-smart-preloader/assets/js/wsp-main-script.js):
'wsp-main-script.js' Firefox ausschließen.
// Überprüfen, ob es sich um den Firefox-Browser handelt
if (navigator.userAgent.indexOf('Firefox') !== -1) {
return; // Beende die Ausführung
}
Plug-in Update ist das natürlich zu erneuern. Der Code direkt der Datei scheint bei Preloader bedingend zu sein, da diese zuerst geladen wird.
An und für sich genügt der Code im Smart Preloader in der JS-Datei! Somit werden auch Caching-Probleme umgangen, wobei der Smart Preloader allein durch Ausschluss der wp-preloader.php immer wieder Cache-Probleme hatte. Es ist durchaus sinnvoll, im Smart Preloader sowohl in der wsp-main-script.js als auch in der preloader.php Browser-Prüfungen vorzunehmen, um eine umfassendere Lösung zu schaffen. Die Tatsache, dass der Preloader in der JS-Datei allein deaktiviert werden kann, scheint zwar ausreichend zu sein, aber es ist nachvollziehbar, beide Codes zu verwenden.
Die Logik dahinter, den Preloader direkt in der PHP-Datei über den User-Agent abzufangen, hat definitiv den Vorteil, dass er erst gar nicht serverseitig für Firefox ausgeliefert wird. Das könnte unter Umständen Performancegewinne bringen, da die JS-Datei in diesem Fall erst gar nicht an den Client geschickt oder verarbeitet werden muss. Allerdings ist der Punkt mit dem Caching anzusprechen, und das ist oft der Knackpunkt. Cache-bedingte Probleme können in bestimmten Szenarien dazu führen, dass Änderungen nicht sofort greifen oder dass das Verhalten inkonsistent wird, welches man natürlich vermeiden sollte.
Der Ansatz, den Preloader direkt in der JS-Datei abzufangen, stellt hingegen sicher, dass der gesamte Prozess im Client gesteuert wird. Dies kann zuverlässiger und einfacher zu handhaben sein, besonders wenn Cache-Probleme auftreten. Aber gleichzeitig kann man sich überlegen, ob nicht doch beide Lösungen parallel genutzt werden sollten: PHP für die serverseitige Kontrolle und JS für eine zusätzliche Absicherung auf der Client-Seite. Damit wird in beiden Fällen vermieden, dass der Preloader unerwünscht in Firefox angezeigt wird.
✨
Und was sagen das Team von Wegerl.at dazu? – Wer braucht schon einen Preloader, wenn man ein Hobby hat, das die Zeit schneller vergehen lässt? Wegerl.at: Hier wird nicht nur geschraubt, hier wird auch gelacht!
Es gibt verschiedene Arten von animierten Ladeindikatoren, die mit CSS und minimalem HTML-Markup erstellt wurden. Dazu gehören unter anderem CSS-Spinner und -Throbber. Es gibt insgesamt sechs verschiedene Vorlagen, die verwendet werden können.
Beachte jedoch, dass der Hintergrund nicht immer farblich anpassbar ist und in diesem Fall CSS-Kenntnisse erforderlich sind. Ein Beispiel für eine solche Vorlage ist Vorlage 1:
Die Einstellungen sind 'Anzeigedauer Loader' und 'Loader zum Ausblenden'. Bspw.
WP Smart Preloader Einstellungen 'Anzeigedauer Loader' und 'Loader zum Ausblenden'
Bemerkungen:
Hier dem TEST schien es die Seitenladezeit bis zu 2 sek. zu verzögern. – wie alle Preloader halt so sind.
Dieses Plug-in war das einzige, das nahtlos mit dem Dunkelmodus zusammenarbeitet. Es verhindert, dass beim Laden der Website im Dunkelmodus kurz der Tagmodus aufblitzt und sorgt dafür, dass direkt der Dunkelmodus angezeigt wird. – stand mal auf dem Blatt.
Preloader Plus
Preloader Plus, Dateigröße 425 KB. 50.000+ aktive Installationen.
Preloader Plus die Einstellungen über Customizer
Das ist großartig! Was ein Entwickler mit einer Programmiergröße von rund 425 KB erreicht hat, ist beeindruckend. Im Vergleich zur Sparsamkeit des Plug-ins Page Loading Effects ist das Plug-in Preloader Plus hier herausragend. Die Anpassung erfolgt über den Customizer, sodass man genau sieht, wie das Ergebnis aussehen wird.
Beim Einstellen der Optionen unter "Settings" sollten die Häkchen bei "Show the preloader only on the front page" und "Show the preloader only on first visit" nicht gesetzt werden, da dies das WYSIWYG-Prinzip beeinträchtigt.
Das Plug-in ermöglicht eine individuelle Anpassung, z. B. das Hinzufügen von Eigenwerbung im Ladebildschirm durch Text (Settings, CUSTOM CONTENT) oder ein Bild (CUSTOM IMAGE). Es bietet auch 6 animierte Icons zur Auswahl und vieles mehr – einfach großartig, schön und leistungsstark!
Anmerkung
Zum 'Show the preloader only on first visit'
Das stimmt. Die Einstellung "Show the preloader only on first visit" zeigt den Page Loading Effect nur beim ersten Besuch einer Seite an. Wenn die Seite bereits besucht wurde und der Browser die Seite gecached hat, wird der Page Loading Effect nicht mehr angezeigt. Das liegt daran, dass der Browser die Seite nicht erneut laden muss und der Page Loading Effect somit nicht erneut ausgeführt wird.
LoftLoader
Das Plug-in LoftLoader, ist mit seinen 447 KB und über 70.000 aktiven Installationen ein beliebtes Tool zur Erstellung von Page Loading Effects. Es bietet eine Vielzahl von Einstellungsmöglichkeiten und Animationsoptionen, darunter auch die Möglichkeit, eigene SVG-Icons zu verwenden.
Die Pro-Version bietet unter anderem die Möglichkeit, dass Benutzer auswählen können, welche Elemente während des Ladevorgangs erkannt werden sollen (Alle Elemente / Bilder / Videos / Bilder & Videos). Das kann die Animation verkürzen, so man Elemente, die "below the fold", also unterhalb des Sichtbereichs sind, vorerst ausschließt.
Insgesamt ist LoftLoader eine leistungsstarke Option für die Erstellung von Page Loading Effects, sowohl für Beginner als auch für erfahrene Entwickler.
Die Option, den Preloader nur einmal pro Besucher-Sitzung anzuzeigen, ist nur in der Pro-Version verfügbar.
Selbst ohne PRO-Funktionen ist dieses Plug-in großzügig in seinen Features. Im Namen der WP-Gemeinde: herzlichen Dank!
Loftloader Lite die Einstellungen über Customizer separat
Die Konfiguration von LoftLoader erfolgt über Customizer, was eine WYSIWYG-Bearbeitung ermöglicht. Es sollte beachtet werden, dass beim Aufruf der Einstellungen der Customizer aufgerufen wird, jedoch nicht derjenige Customizer wie gewohnt sondern ein separater Customizer verwendet wird.
Oh! – It’s a LoftLoader
Weiter im Customizer sehe Beispiel: Da sind so Ending Animationen von Slide Left & Right usw.
Es verursacht jedoch wie alle anderen Plug-ins außer WP Smart Preloader eine Disharmonie, wenn die Website im Dunkelmodus neu geladen wird und kurzzeitig in den Tagmodus wechselt, bevor es in den Dunkelmodus übergeht. Weiter sehe hier zur Supportanfrage.
Und viel Erfolg zu wünschen
Preloader Matrix, 1,4 MB. 1000+ aktive Installationen. Das ist soweit sehr gut das Plug-in.
Stylish Preloader, 3 MB. 20+ aktive Installationen. Scheint noch im Aufbau zu sein… In Aktivierung folgt so Meldung: "Das Plugin erzeugte 34 Zeichen mit unerwarteter Ausgabe während der Aktivierung" … das kann aber noch was werden.
Flat Preloader, 3,4 MB. 4.000+ aktive Installationen. Das Plug-in mit an mehr Auswahl der Animationen. …das mit Page Loading Effects nur für Erstaufruf geht nicht.
Schaffe mit WordPress und Advanced Editor schöne Websites. Hier ist für dich, euch eine leicht lesbare und freundliche Anleitung.
Die Website verwendet funktionelle Cookies. Sie verwendet keine Cookies von Drittanbietern.
Aber hallo! – zur Begrüßung eine Rundfrage?
🧡 … das so zum Zeit entschleunigen.
Die Erstellung von Website-Inhalten erfordert oft kreative Ideen. Es wäre interessant zu erfahren, wo Ideen für die Gestaltung der Website-Inhalte gefunden werden und wie diese gestaltet werden. Bitte mitteilen, wie typischerweise Inspiration für die Website-Inhalte gefunden wird.
Sie können die Tastaturnavigation nutzen: Tab zum Fokussieren, Leertaste zum Auswählen und Esc zum Schließen der Rundfrage.
Wird geladen ...
Falls alle Optionen ausgewählt werden sollen, empfiehlt es sich, im Ausschlussverfahren festzustellen, auf welche am ehesten verzichtet werden kann, und dann das auszuwählen, was am wichtigsten erscheint.
Hinweis zur Tastaturnavigation: Sobald Sie die Website scrollen, können Sie die Enter-Taste drücken, um den Inhalt direkt zu fokussieren, ohne den Tabindex zu durchlaufen. Das zweite Enter aktiviert das Element.
🎶 Während des Besuchs kann es neben informativen Ergebnissen auch zu Klangeffekten kommen, um bestimmte Elemente hervorzuheben. – Viel Spaß beim Erkunden!
Zur Optimierung unserer Website nutzen wir Tools wie 'Statify' und 'Visit Duration', die anonymisierte Daten wie die Verweildauer erfassen.
'Ist das Plug-in Docket-Cache (neuer Tab) schon zu kennen?
Pop-up
Das zur Umfrage ist von WP-Polls und das Pop-up ist von Boxzilla.
Lesen Sie die Inhalte nicht bequem?
Erhöhen Sie die Schriftgröße über die der Headerzeile oder gleich hier:
NORMAL, LARGE oder X-LARGE
Möchten Sie das Licht an- oder ausschalten?
Bitte sehr: Licht Ein/Aus
… auch Kontrast -/+ anpassen.
Sie können auch die Tastatur verwenden: Fokus mit Tab, Auswahl mit Space und Schließen mit Esc.
Im Inhalt die Tastaturnavigation:
Sobald Sie die Website scrollen, können Sie die Enter-Taste drücken, um den Inhalt direkt zu fokussieren, ohne den Tabindex zu durchlaufen. Das zweite Enter aktiviert das Element.
Tabulator (Tab): Navigiert durch interaktive Elemente.
Shift + Tab: Gehe zurück zum vorherigen Element.
Enter: Erste Betätigung fokussiert, zweite aktiviert.
Pfeiltasten: Scrollen in Texten oder Menüs.
Leertaste: Aktiviert Header-Buttons und scrollt im Content.
