Verwendung: Event oder CSS Class sobald Slider fertig geladen ist

Elke's Avatar

Elke

22 Jan, 2021 12:31 PM

Produkt: Slider Pro Contao

Hallo!

Ich möchte einen Slider erst einblenden sobald er geladen ist.
Gibt es die Möglichkeit über eine CSS Klasse oder JS Event?

Vielen Danke,
Elke

  1. Support Staff 1 Posted by RockSolid Theme... on 22 Jan, 2021 03:04 PM

    RockSolid Themes's Avatar

    Vielen Dank für Ihre Frage.

    Was genau ist mit „geladen“ in Ihrem Fall gemeint?

    Sobald das Slider-Skript fertig initialisiert wurde, erhält das betreffende Slider-Element einige CSS-Klassen, darunter rsts-main.

    Mit folgendem CSS-Code lässt sich somit der Slider bis zur Initialisierung ausblenden:

    .mod_rocksolid_slider:not(.rsts-main) {
        display: none;
    }
    
  2. 2 Posted by Elke on 22 Jan, 2021 03:51 PM

    Elke's Avatar

    Vielen Dank für die schnelle Antwort!
    Mit "geladen" meine ich das Script und alle Inhalte (Bilder, Videos…) die er braucht um angezeigt zu werden.

    Ich würde in diesem Fall gerne einen Loader anzeigen bis der Inhalt verfügbar ist.

  3. Support Staff 3 Posted by RockSolid Theme... on 25 Jan, 2021 09:01 AM

    RockSolid Themes's Avatar

    Für diesen Fall sieht das Slider-Skript keine Klassen oder JS-Events vor. Sie können mittels JavaScript jedoch selbst prüfen ob alle Bilder des Sliders geladen sind:

    function areImagesLoaded () {
        var loaded = true;
        jQuery('.mod_rocksolid_slider img').each(function() {
            if (this.complete === false) {
                loaded = false;
            }
        });
        return loaded;
    }
    
  4. 4 Posted by Elke Schiffer on 28 Jan, 2021 10:05 AM

    Elke Schiffer's Avatar

    Vielen Dank!

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:

»

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac