Info echo

Ist der Classic-Editor schon zu kennen? –

"Advanced Editor Tools – ist so klasse!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

---

Info echo

Anklickt Classic-Editor mit Advanced Editor Tools

"Advanced Editor Tools – ist das ausgezeichnete!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

---

Info echo

Klassischen Editor anwenden! – und …

"Advanced Editor Tools – ist so sehr gut !"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

---

Info echo

… die Welt gehört dem, der sie genießt.

"Advanced Editor Tools – und tut sehr gut!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

---

Info echo

Advanced Editor Tools aktive Installationen: 2+ Millionen

"Advanced Editor Tools – ist so fabelhaft!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

---

Info echo

Ansprechend! – so gehts hier zur Lancierung

"Advanced Editor Tools – ist de luxe!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

---

Info echo

… und NEU! – Classic Widgets

"Classic Widgets – sind so grandiose!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

---

Info echo

Werkraum ist Werkraum und Frontend ist Frontend

Katzen SVG OpenClipart-Vectors; Ticker von Ditty News Ticker

"Advanced Editor Tools – ist so fein!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

---

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 eine wichtige Rolle spielen, um ein nahtloses Benutzererlebnis zu 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.

/* Page Loading Effect */ 
add_action('wp_footer', function () {
?>

<div class="pageLoader"> <div class="pageLoaderText">Einen Moment bitte<span class="pageLoaderDots"></span></div> </div> 

<style>
.pageLoader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    color: #2b2b2b;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}
.pageLoaderText {
    font-size: 2rem;
    font-weight: 800;
}
</style>

<script type="text/javascript">
(function($) {
	let interval = setInterval(function() {
		let dots = $('.pageLoaderDots');
		if (dots.text().length !== 3) {
			dots.append('.');
		} else {
			dots.text('');
		}
	}, 0);
	$(function() {
		clearInterval(interval);
		$('.pageLoaderDots').text('');
		$('.pageLoader').fadeOut();
	});
})(jQuery);
</script>

<?php 
});

<img class="aligncenter wp-image-205071 size-full" src="https://..Spinner-5.gif" alt="Spinner-5" width="64" height="64" />

WP-Plug-ins

Die Auswahl von Page Loading Effects

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. 🐻

Wichtige Details auf einen Blick: Die Tabelle im Überblick

1. Die Reihenfolge der Plug-ins folgt in etwa ihrer Dateigröße.
2. Die Anzahl der aktiven Installationen gibt einen Hinweis auf die Beliebtheit des jeweiligen Plug-ins.
3. Es gibt auch Plug-ins, die nur beim Erstaufruf der Website Page Loading Effects anzeigen können.
4. Informationen zu den Farbeinstellungen der Loading Effects sind ebenfalls enthalten.
5. Einige Plug-ins sind sich in ihren Funktionen sehr ähnlich.

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. 20.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 nicht definierbar.
• 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: <div id="wptime-plugin-preloader"></div> einzutragen.

Das ist also ein Plug-in für selbst erstelltes Icon oder GIF bspw. der eignen Website das Emblem zu zeigen. – oder so PRELOADERS

Page Loading Effects

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.

• 4 Vorlagen, dazu auch 'Benutzerdefinierte Einstellungen'.

1. Das mit den Cookies für die Option "nur Erstaufruf den Loading Effect zeigen" ist hervorragend gelöst!
2. 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.
3. 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.

• Color Settings für Back-ground und Animated.

Easy Lite Preloader

Easy Lite Preloader, Dateigröße 90 KB.  400+ aktive Installationen.

• Ein Plug-in, das sich von den anderen unterscheidet, ist jenes, bei dem der Übergang nicht weich, sondern eher bissig ist.
• Die Option den Page Loading Effects nur im Erstaufruf zeigen ist nicht.
• Die Option, Page Loading Effects nur beim ersten Aufruf der Seite zu zeigen, ist nicht verfügbar.

WP Smart Preloader

WP Smart Preloader, Dateigröße 395 KB. 8.000+ aktive Installationen.

/* 1. Smart Preloader für Firefox */
add_action('wp_footer', function() { 
  ?>
  <script>
    (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
        $(function () {
          setTimeout(function() {
            $('body .smart-page-loader').fadeOut(500, function() {
              $('body .smart-page-loader').css('opacity', 0);
            });
          }, 1500);
        });
      }
    })(jQuery);
  </script>
  <?php
});

/* 2. Browser-spezifisch für Firefox */
add_action('wp_footer', function() { 
  ?>
  <script>
    (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
        $('body').addClass('hidden-site');

        // Entferne die Klasse nach einer festen Verzögerung, bevor die Seite vollständig geladen ist
        setTimeout(function() {
          // Entferne die Klasse, um die Seite anzuzeigen
          $('body').removeClass('hidden-site');
        }, 500); // Ändere die Verzögerungszeit hier nach Bedarf (in Millisekunden)
      }
    })(jQuery);
  </script>
  <?php
});

/* CSS code to hide the page */
.hidden-site {
  visibility: hidden !important;
  opacity: 0 !important;
}

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:

.smart-page-loader {
    background-color: #242525;
}
.smart-loader-one {
    width: 50px;
    height: 50px;
    border-top: 1px solid rgba(201, 195, 185, 0.08);
    border-right: 1px solid rgba(201, 195, 185, 0.08);
    border-bottom: 1px solid rgba(201, 195, 185, 0.08);
    border-left: 1px solid rgba(201, 195, 185, 0.5);
}

• Das mit nur für Erstaufruf zeigen ist nicht.
• Die Einstellungen sind 'Anzeigedauer Loader' und 'Loader zum Ausblenden'. Bspw.

  

Bemerkungen:

• Hier dem TEST schien es die Seitenladezeit bis zu 2 sek. zu verzögern.
• Dieses Plug-in ist 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.

Preloader Plus

Preloader Plus, Dateigröße 425 KB. 50.000+ aktive Installationen.

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!

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.

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.

Preloader Avesome, 10,6 MB. 2.000+ aktive Installationen.

Aber hallo mal wieder!

Danke sehr

Aktualisiert im Jahr 2023-August