Page Loading Effects
6 Plug-ins im Vergleich

Info echo

Ist der Classic-Editor schon zu kennen? –
“Classic und TinyMCE – ist so klasse!”
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo

Anklickt Classic-Editor mit TinyMCE Advanced
“Classic und TinyMCE – ist das ausgezeichnete!”
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo

Klassischen Editor anwenden! – und …
“Classic und TinyMCE – ist so sehr gut !”
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo

… die Welt gehört dem, der sie genießt.
“Classic und TinyMCE – und tut sehr gut!”
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo

TinyMCE aktive Installationen: 2+ Millionen
“Classic und TinyMCE – ist so fabelhaft!”
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo

Ansprechend! – so gehts hier zum Progress
“Classic und TinyMCE – ist de luxe!”
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo

… und NEU! – Classic Widgets
“Classic Widgets – sind so grandiose!”
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo

Werkraum ist Werkraum und Frontend ist Frontend
Illustraion SVG unDraw; Ticker von Ditty News Ticker
“Classic und TinyMCE – ist so fein!”
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Erst mal ist zu denken “Wenn die Seite zu langsam, dass man von Page Loading Effects braucht, dann macht man was falsch”. Das Zitat ist sehr richtig! … So aber möchte das so Erlebnis-Website sein, so sind hier der Website Wegerl des mehreren zu laden. Das sind dem Widgetbereich die Animationen und Audios. Kurz gesagt, die Website kann im Erstaufruf etwas zu wünschen lassen. – wenn auch ist dem Erstaufruf ein Page Loading Effect gern auch im Namen Preload(er) einfach nur schön.  …und zu guter Letzt kann der Übergang animiert auch für jede Seite sein! – so wie immer, wenn gefällt.

Spinner-5

Wer so GIF als Spinn usw., siehe PRELOADERS 

Page Loading Effects –
technisch keine Hexerei

So Page Loading Effects sind zum Vorschalten während der Browser die Website zeichnet (rendert). Meist sind die Plug-ins benannt als Preloader. Ein ∴Pre∴loader an und für sich ist das nicht. Des Letzteren ist hier nicht relevant. Der Page Loading Effects schaltet sich nur vor und wird deaktiviert, sobald die Seite 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
});

Dort bei <div class="pageLoaderText">Einen Moment bitte<span class="pageLoaderDots"></span></div> kann statt Text ebenso ein Spinn wie oberhalb eingetragen sein:

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

WP-Plug-ins

Die Selektion von Page Loading Effects

Plug-ins Page Loading Effects für WP
Die Selektion

Das Wählerische war hier so Plug-in zu finden, das nur für den Erstaufruf der Website als aktiv eingestellt werden kann. Das ist so mit Cookies.

  • Das mit dem Erstaufruf ist zu unterscheiden, mit der Einstellung nur für die Front-Seite (Home) zeigen. Desselben ist fast allen Plug-ins möglich. Oder eben jeder Seite im Erstaufruf der Loading Effects.

Folgendes ist, wie es sich dem TEST ergeben hat. Also der Plug-ins sind noch mehr zu finden. Da sind der Plug-ins, die mit 40.000 Anwender so gut sind wie welche mit 400 aktive Installationen.

Das Wählerische

… und nun ist selbst hier wegerl.at so Loading Effects

Die Informationen zur folgenden Tabelle

  1. Die Reihung hier folgt der Dateigröße (in etwa) des Plug-ins.
  2. Weiter das der aktiven Installationen, so des Moments der Erfolg des Plug-ins.
  3. Sofern sind die Plug-ins, welche auch nur im Erstaufruf Page Loading Effects zeigen können.
  4. Dann der Einstellungen von Farbe des Loading Effects.
  5. Ähnlich sind sich die Plug-ins …
Datei-größeInstal-lationenOn first visitBack-groundSind ähnlich
Preloader68 KB20.000+JaJa🟠
Page Loading Effects70 KB4.000+JaJa🟣
Easy Lite Preloader90 KB600+Ja🟠
WP Smart Preloader395 KB10.000+m. extra CSS🟣
Preloader Plus425 KB30.000+JaJa🔵
Loftloader459 KB40.000+Ja / ProJa🔵

Ähnlich sind sich die Plug-ins …

Preloader und Easy Lite Preloader. Den beiden ist eher ein unentschieden. – also wies gefällt.

Page Loading Effects und WP Smart Preloader. Wobei das Plug-in ‘Page Loading Effects’ auf ein Update wartet, weil das Plug-in hier schon älteren iPads einen Bug hat. Das mehr an Einstellung sind sinNvoll und doch geringerer Dateigröße.

Preloader Plus und Loftloader. – der Pro-Version von Loftloader bietet noch des mehr.

Derweil mal so

Die Plug-ins …

Preloader

Preloader, 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, 70 KB. 4.000+ aktive Installationen. – super Sache, allerdings hapert es an Updates (nun Juli 22, letztens Update vor 3 Jahren).

… 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 – hervorragend gelöst!
2) Die maximale Dauer des Seitenladenprogramms. Das ist sehr von Nutzen, falls der Browser mal nicht aufhört zu laden, obwohl die Seite schon da ist. Ansonsten wird der Effekt bestmöglichen Zeit ausgeblendet.
3) Das ist um ‘Page Loading Effects’ mal so zu deaktivieren, wenn der Webmaster so Wartungsarbeiten und die Loading Effekt da als störend empfunden ist. Ist aber dann auch dem Besucher deaktiviert. Aber selbst dem Webmaster in Aktivität kann so Page Loading Effects sehr entspannend wirken…

  • Color Settings für Background und Animated.

Easy Lite Preloader

Easy Lite Preloader, 90 KB.  600+ aktive Installationen.

Easy Lite Preloader

  • Welches hier anders, das ist der Übergang nicht weich ist, sondern bissig.
  • Das nur mit Erstaufruf den Page Loading Effects zeigen ist nicht.

WP Smart Preloader

WP Smart Preloader,
395 KB. 10.000+ aktive Installationen. – allerdings scheint es hier die Seitenladezeit bis zu 2 sek. zu verzögern.

CSS-Spinner und -Thobber, der mit CSS und minimalem HTML-Markup erstellt wurde.

  • 6 Vorlagen
  • Der Hintergrund ist farblich nicht so der Einstellung anpassbar, also CSS bspw. der 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’

Preloader Plus

Preloader Plus, 425 KB. 30.000+ aktive Installationen.

Preloader-Plus-einstellungen-customizer
Preloader Plus die Einstellungen über Customizer

Das ist super! – Was so Sportsmann von wegen Programmierung in so 425 KB bringt, ist hervorragend. Von der Frugalität des Plug-ins Page Loading Effects hier zum Plug-in Preloader Plus. – spitze.

  • Die Einstellung erfolgt über Customizer, so ist WYSIWYG.

Zur Einstellung bei Settings sind die Häkchen bei Show the preloader only on the front page und Show the preloader only on first visit nicht zu setzen, denn sonst ist nichts mit WYSIWYG.

  • Das Plug-in für Individuelles. So das Design anpassen z. B. Eigenwerbung im Loading durch Text (Settings, CUSTOM CONTENT), ein Bild (CUSTOM IMAGE).
  • Weiter 6 animierte Icons zur Auswahl. Usw. – klasse, schön, performant.

Anmerkung

Zum ‘Show the preloader only on first visit’

Des Moments möchte man meinen, die Einstellung ‘Show the preloader only on first visit’ funktioniert nicht. Das funktioniert nämlich, sodass jedem weiteren Erstaufruf von Seite der Page Loading Effects ist … und des Weiteren von schon besuchten Seite ist der Page Loading Effects nicht. – bums, weil besuchte Seiten der Browser schon gerendert hat.

Loftloader

Loftloader, 459 KB. 40.000+ aktive Installationen.

Sehenswert! – Ein Plug-in auch mit Pro-Funktionen, aber sieh selbst:LoftLoader

  • PRO so zum Beispiel: Benutzer können auswählen, welche Elemente während des Ladevorgangs erkannt werden sollen (Alle Elemente / Bilder / Videos / Bilder & Videos).
  • Weiter das der Option to display the preloader once per visitor session ist auch nur der Pro-Version.

Wer das so der PRO nicht braucht, ist das auch ein sehr großzügiges Plug-in! – Danksagung im Namen WP-Gemeinde.

LoftLoader-einstellung-customizer
Loftloader Lite die Einstellungen über Customizer separat
  • Einstellung. Die Einstellung erfolgt über Customizer, so ist WYSIWYG. Zur Beachtung, dem Aufruf zum Setting folgt da wohl der Customizer, aber nicht dem Customizer vom Frontend Website. Enhanced settings panel with WordPress Customizer.
LoftLoader-einstellungen-customizer-background
Oh! – It’s a LoftLoader

Weiter sehe man hier zum Beispiel: Da sind so Ending Animationen von Slide Left & Right usw.

Und viel Erfolg zu wünschen …

Preloader Matrix, 1,4 MB. 400+ aktive Installationen.
Das ist soweit sehr gut das Plug-in und wird schon …

Best Preloader, 1,7 MB. 700+ aktive Installationen.
Das wär ganz nett auch! –, aber das mit im Erstaufruf Page Loading Effects ist nicht.

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. 3.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. 1.000+ aktive Installationen.

2022-06


Aber hallo!

Danke


Aktualisiert im Jahr 2022-September