Willkommen beim WP Wegerl.at 'Lesemodus'!
Entspanntes Lesen und spannende Artikel warten auf dich.
Entdecke unsere besten Beiträge und genieße den Lesemodus.
smilies.4-user.de

Page Loading Effects
6 Plug-ins im Vergleich

Werbung

Der Classic-Editor: Vertraut und zuverlässig –
Ihr bewährter Begleiter.  Info


Erleben Sie den Classic Editor neu!
(Bilder von pixelcreatures)


Viele Nutzer schätzen die vertraute Umgebung des Classic-Editors, die eine einfache und schnelle Bearbeitung ermöglicht.




Werbung

Mit dem Advanced Editor Tools auf das nächste Level –
Mehr Funktionen, mehr Möglichkeiten.


Classic Editor + Advanced Editor Tools
= Ihr Erfolgsrezept


Der Advanced Editor erweitert den Funktionsumfang des Classic-Editors und ermöglicht es, Inhalte noch effektiver zu bearbeiten.




Werbung

Einfach und intuitiv –
Der Classic-Editor für alle. Info


Classic Editor & Advanced Editor Tools
Erleben Sie es.


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.





Info echo1 OpenClipart-Vectors-katze-1
Ist der Classic-Editor zu kennen? –
Versäume bitte nicht den Advanced Editor! Blick in die Zukunft: Advanced Editor Tools
Info echo2 OpenClipart-Vectors-katze-2
Classic-Editor – Classic Widgets
"Innovativ und ausgezeichnet!" Hauch von Nostalgie: Classic Widgets
Info echo3 OpenClipart-Vectors-katze-3
Klassischen Editor! – und …
"Advanced Editor Tools" Dauerhaft dynamisch: Advanced Editor Tools
Info echo4 OpenClipart-Vectors-katze-7
… die Welt gehört dem, der sie genießt.
– mit Classic Editor und Advanced Tools! Advanced Editor Tools und Classic Widgets
Info echo5 OpenClipart-Vectors-katze-4
Aktive Installationen: 2+ Millionen
"Advanced Editor Tools – ist fabelhaft!" Unverändert exzellent: Advanced Editor Tools
Info echo6 OpenClipart-Vectors-katze-5
Antörnend! – hier zur Lancierung
"Advanced Editor Tools – ist de luxe!" Classic Editor und Advanced Editor Tools
Info echo7 OpenClipart-Vectors-katze-6
Classic Widgets sind innovativ!
"Classic Widgets – sind modern!" Advanced Editor ToolsClassic Widgets
Info echo8 OpenClipart-Vectors-katze-8a
"Werkraum ist Werkraum"
Katzen SVG OpenClipart-Vectors; Ticker von Ditty News Ticker
"Frontend ist Frontend!" Classic Editor und Advanced Editor Tools

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.

Spinner-5

Auch der Webmaster kann von "Page Loading Effects" profitieren, da sie während der Aktivität sehr entspannend wirken können.

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.

Beispiel

/* 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 
});

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

Wer so GIF als Spinn usw., siehe PRELOADERS 

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

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.

WP-Plug-ins

Die Auswahl von Page Loading Effects

Plug-ins Page Loading Effects für WP
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. 🐻

Wichtige Details auf einen Blick

  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.
1. Datei-größe2. Instal-lationen3. First visit4. Back-ground5. Sind ähnlich
Preloader68 KB10.000+JaJa🟠
Page Loading Effects70 KB3.000+JaJa🟣
Easy Lite Preloader90 KB400+Ja🟠
WP Smart Preloader395 KB8.000+m. extra CSS🟣
Preloader Plus425 KB50.000+JaJa🔵
Loftloader459 KB70.000+Ja / ProJa🔵

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:
$image_width = apply_filters('wpt_thepreloader_image_size_get_width', '96');
$image_height = apply_filters('wpt_thepreloader_image_size_get_height', '62');
  • 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
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.

[nighteyeplgn="active"] #wptime-plugin-preloader {
	background-color: #862D1C !important;
}

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'.
PageLoadingEffects-einstellung
Page Loading Effects die 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.

Easy Lite Preloader

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

Problemloses Laden mit WP Smart Preloader und
Dunkelmodus – Inklusive Lösung für Firefox

Zunächst möchte ich meine Unterstützung für WP Smart Preloader im Zusammenhang mit dem Dunkelmodus zum Ausdruck bringen. Es ist der einzige Preloader, der hier auf meiner Website nahtlos mit dem Dunkelmodus harmoniert. Wenn der Dunkelmodus aktiviert ist, gibt es keine störenden Aufblitzeffekte beim Neuladen oder Navigieren auf der Website.

Mit den getesteten Browsern Chrome, Opera und Safari funktioniert WP Smart Preloader perfekt und zeigt eine optimale Harmonie.

Lediglich 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 Glück konnte ich dieses Problem durch die Entwicklung mit ChatGPT-3.5 beheben. Dieses und das markante Problem des hängenbleibens wurde auch in der Version: 1.15.2 (Anfang Jahr 2024) nicht behhoben. (!?)

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 entwickelt haben. Beide Codes sind relevant für eine konsistente Darstellung, aber des Letzeren war das nicht mehr so funktioniell.

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, den hier in Anwendung:

  1. 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.
  2. 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.
/* 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
});

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;
}

Weitere Details 🙂 findest du im Support-Thread mit dem Titel Unendliches Laden auf Firefox.

Ich hoffe, dass dieser Beitrag anderen hilft, die vor ähnlichen Problemen stehen, und ihnen ein reibungsloses Erlebnis mit 'WP Smart Preloader' und dem Dunkelmodus auf ihren Websites ermöglicht. Beide Beauty-Features können so optimal genutzt werden.


Wenn du erfahren möchtest, wie das so ist mit JavaScript-Code über functions.php, folge diesem Link.

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.

    wp-smart-preloader-einstellung
    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-einstellungen-customizer
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.LoftLoader

  • 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-einstellung-customizer
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.

LoftLoader-einstellungen-customizer-background
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.

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


Aber hallo mal wieder!

Danke sehr

Der Beitrag wurde mit fachlicher Unterstützung erstellt.


Aktualisiert im Jahr 2023 August