Contao-Camp 2024
Ergebnis 1 bis 10 von 10

Thema: Preloader?

  1. #1
    Contao-Nutzer
    Registriert seit
    28.09.2017.
    Beiträge
    106

    Frage Preloader?

    Hallo,

    kann mir jemand Helfen? Ich möchte einen Selbsterstellten "Preloader" in ein Contao-Theme einbauen. Weiß jemand wie ich das mache?

    Danke im Voraus.

  2. #2
    Contao-Urgestein Avatar von Samson1964
    Registriert seit
    05.11.2012.
    Ort
    Berlin
    Beiträge
    2.792

    Standard

    Zitat Zitat von jo94 Beitrag anzeigen
    Hallo,

    kann mir jemand Helfen? Ich möchte einen Selbsterstellten "Preloader" in ein Contao-Theme einbauen. Weiß jemand wie ich das mache?

    Danke im Voraus.
    Habe ich gerade gemacht. Bin aber erst ab 22 Uhr zuhause. Vielleicht ist jemand schneller...

    Gesendet von meinem L52 mit Tapatalk
    Viele Grüße
    Frank

    Seit Mai 2013 Fan von Contao
    Webmaster vom Deutschen Schachbund und Berliner Schachverband
    Mein Blog: Schachbulle
    Meine Erweiterungen bei GitHub
    Meine Videos auf YouTube: Playlist zur Contao-Programmierung/Einrichtung

  3. #3
    Alter Contao-Hase Avatar von Messa
    Registriert seit
    19.01.2011.
    Ort
    Vorarlberg, Österreich
    Beiträge
    1.423

    Standard

    Googel hilft dir

    https://codepen.io/rovalx/pen/aOEXPG...ow_forks=false
    https://codepen.io/mauritiusdsilva/p...ow_forks=false

    Aufbau.

    1. Neues Modul erstellen - Eigner HTML Code
    2. HTML Code deiner Wahl platzieren. CSS kannst du dort auch InLine zwischen <style></style> oder in deine standard CSS eintragen.
    3. Neues Template erstellen - verwende hier ein j_.......html5
    5. Umbennen auf j_preload.html5
    6. Java Script Code deiner Wahl darin platzieren das <script></script> nicht vergessen.
    7. Seitenlayout bearbeiten Modul in den Head bereich
    8. j_preloader bei jqueyr wählen.

    lg Matthias
    Geändert von Messa (15.11.2017 um 23:43 Uhr)
    Full Service Agentur - Grafikdesign, Screendesign, Webdesign, Webentwicklung, SEO, Weiterbildung, persönliches Coaching
    http://www.matthiasgmeiner.com

  4. #4
    Contao-Urgestein Avatar von Samson1964
    Registriert seit
    05.11.2012.
    Ort
    Berlin
    Beiträge
    2.792

    Standard

    Mein Aufbau:

    Template fe_page.html5 direkt unter <body>:
    HTML-Code:
    <div class="preloader"><div class="loaded">&nbsp;</div></div>
    In einer eigenen JS-Datei im JQuery-Bereich eingefügt:
    Code:
    $(window).load(function ()
    {
    	$('.loaded').fadeOut();
    	$('.preloader').delay(1000).fadeOut('slow');
    });
    Und das CSS dazu:
    HTML-Code:
    /* ########################################################################################## */
    /* Ladeanzeige */
    /* ########################################################################################## */
    .preloader {
    	position: fixed;
    	top: 0;
    	left: 0;
    	right: 0;
    	bottom: 0;
    	background-color: #fefefe;
    	z-index: 99999;
    	height: 100%;
    	width: 100%;
    	overflow: hidden !important;
    }
    .loaded {
    	width: 60px;
    	height: 60px;
    	position: absolute;
    	left: 50%;
    	top: 50%;
    	background-image: url(images/loading.gif);
    	background-repeat: no-repeat;
    	background-position: center;
    	-moz-background-size: cover;
    	background-size: cover;
    	margin: -20px 0 0 -20px;
    }
    Ist identisch mit diesem Template, das ich für Contao nachbaue.
    Viele Grüße
    Frank

    Seit Mai 2013 Fan von Contao
    Webmaster vom Deutschen Schachbund und Berliner Schachverband
    Mein Blog: Schachbulle
    Meine Erweiterungen bei GitHub
    Meine Videos auf YouTube: Playlist zur Contao-Programmierung/Einrichtung

  5. #5
    Contao-Nutzer
    Registriert seit
    28.09.2017.
    Beiträge
    106

    Frage

    Zitat Zitat von Messa Beitrag anzeigen
    Googel hilft dir

    https://codepen.io/rovalx/pen/aOEXPG...ow_forks=false
    https://codepen.io/mauritiusdsilva/p...ow_forks=false

    Aufbau.

    1. Neues Modul erstellen - Eigner HTML Code
    2. HTML Code deiner Wahl platzieren. CSS kannst du dort auch InLine zwischen <style></style> oder in deine standard CSS eintragen.
    3. Neues Template erstellen - verwende hier ein j_.......html5
    5. Umbennen auf j_preload.html5
    6. Java Script Code deiner Wahl darin platzieren das <script></script> nicht vergessen.
    7. Seitenlayout bearbeiten Modul in den Head bereich
    8. j_preloader bei jqueyr wählen.

    lg Matthias
    Danke für Eure Hilfe
    Ich bin den Schritten gefolgt, hat auch alles super geklappt, bis auf einen Punkt.. "Punkt 7" Wenn ich das Modul im Headerbereich einbinde ist nur der Preloader zu sehen, die eigentliche Seite aber leider nicht mehr?
    Wenn ich das Modul in der Header-Navigation einbinde, dann rutscht meine Webseite nach links und der Preloader nach rechts?
    Weiß vielleicht jemand was ich da falsch gemacht habe?

  6. #6
    Contao-Nutzer
    Registriert seit
    28.09.2017.
    Beiträge
    106

    Frage

    Sorry ich war an der falschen Stelle, jetzt habe ich das Modul bei "Eingebundene Module" in den Seitenlayouts eingebunden.
    Jetzt funktioniert er aber die Seite öffnen sich nicht (also der Preloader lädt die ganze Zeit neu)?

  7. #7
    Contao-Nutzer
    Registriert seit
    28.09.2017.
    Beiträge
    106

    Frage

    hat jemand eine Lösung für mich? Warum der Preloader nicht aufhört zu laden? Vielen Dank.

  8. #8
    Contao-Urgestein Avatar von Samson1964
    Registriert seit
    05.11.2012.
    Ort
    Berlin
    Beiträge
    2.792

    Standard

    Hast Du einen Link zur Seite?
    Viele Grüße
    Frank

    Seit Mai 2013 Fan von Contao
    Webmaster vom Deutschen Schachbund und Berliner Schachverband
    Mein Blog: Schachbulle
    Meine Erweiterungen bei GitHub
    Meine Videos auf YouTube: Playlist zur Contao-Programmierung/Einrichtung

  9. #9
    Contao-Nutzer
    Registriert seit
    28.09.2017.
    Beiträge
    106

    Frage

    die Seite ist leider noch nicht Online.

    Ich hab den Preloader (siehe Anhang) unter Eingebundene Module eingebunden. Sobald ich diesen Online schalte, lädt nur noch der Preloader die eigentliche Seite ist nicht mehr sichtbar :/
    Angehängte Grafiken Angehängte Grafiken

  10. #10
    Contao-Nutzer
    Registriert seit
    24.10.2020.
    Beiträge
    5

    Standard

    Schon ein bisschen älter, aber vielleicht hilft es ja jemand der es auch verwenden will. Hab etwas kämpfen müssen, aber jetzt läuft die tolle Lösung von Samson1964 bei mir mit contao 4.9

    Bei jQuery heißt es mittlerweile:

    $(window).on('load', function ()
    {
    $('.loaded').fadeOut();
    $('.preloader').delay(1000).fadeOut('slow');
    });

    denn die Load function gibt es ja nicht mehr.

    Und sicherstellen, dass der JS Code auch ausgeführt wird und nicht ganz am Ende eingebunden ist. console.log("komme ich hier vorbei") Ausgabe hat mir geholfen den Fehler zu finden.

    Bei meinem Seitenlayout (oneo Theme) musste ich es als externe JS-Datei einbinden; in den JS-Eingabebereich vom Seitenlayout packen oder dort includen hat nicht gereicht.

    Gruß
    Michel

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •