Die perfekte Kombination aus Slick Carousel und Lottie-Animation: verzögertes Laden und ereignisgesteuert

Ziel dieses Artikels ist es, das Problem zu lösen, dass Lottie-Animationen in Slick Carousel-Folien nicht richtig angezeigt werden. Die Kernlösung besteht darin, den JSON-Pfad der Lottie-Animation im Attribut „data-src“ zu speichern, anstatt „src“ direkt zu verwenden, und das „init“-Ereignis von Slick Carousel mit dem „setTimeout“-Mechanismus zu verwenden, um die Lottie-Animation nach Abschluss der Karussellinitialisierung manuell zu laden und abzuspielen, wodurch die Auswirkungen des „display: none“-Stils auf das Animationsrendering vermieden werden.

Herausforderung: Rendering-Problem der Lottie-Animation in versteckten Elementen

Bei der Verwendung der Lottie-Animationsbibliothek (über das benutzerdefinierte Lottie-Player-Element) in Kombination mit dem Slick Carousel-Karussell-Plug-in stoßen Entwickler häufig auf ein Problem: Die Lottie-Animation kann in der Slick Carousel-Folie nicht richtig abgespielt oder angezeigt werden, funktioniert aber außerhalb des Karussells gut. Der Grund dafür ist, dass Slick Carousel zur Erzielung des Folienwechseleffekts die derzeit nicht aktiven Folien auf „Anzeige: Keine“ setzt. Der Lottie-Player initialisiert oder rendert animierte Inhalte möglicherweise nicht richtig, insbesondere wenn er versucht, Animationen direkt über das src-Attribut beim Laden der Seite zu laden und abzuspielen, da sein Host-Element ausgeblendet ist. Bei der Überprüfung im Browser ist das Lottie-Player-Element möglicherweise vorhanden, der darin enthaltene Lottie-Animationsinhalt fehlt jedoch.

Die Kernidee der Lösung: Lazy Loading und ereignisgesteuert

Um die durch die Anzeige verursachten Rendering-Hindernisse zu überwinden: Keine, müssen wir die Ladestrategie der Lottie-Animation ändern. Der Kerngedanke ist wie folgt:

1. Laden der Lottie-Animation verzögern: Anstatt das src-Attribut direkt auf das Lottie-Player-Element festzulegen, speichern Sie den Pfad zu seiner JSON-Animationsdatei in einem benutzerdefinierten data-src-Attribut.
2. Nutzen Sie das Initialisierungsereignis von Slick Carousel: Nachdem Slick Carousel vollständig initialisiert und die DOM-Struktur vorbereitet wurde, lösen Sie das Laden der Lottie-Animation aus, indem Sie das Initialisierungsereignis abhören.
3. Lottie-Animation manuell laden: Durchlaufen Sie im Init-Ereignisrückruf alle Lottie-Player-Elemente, rufen Sie deren data-src-Attributwert ab und rufen Sie die Methode „load()“ des Lottie-Players auf, um die Animation manuell zu laden und abzuspielen.
4. Einführung von setTimeout: Da der Init-Rückruf von Slick Carousel möglicherweise ausgelöst wird, bevor das DOM vollständig stabil ist, oder der Lottie-Player selbst eine bestimmte Initialisierungszeit benötigt, kann die Einführung eines kurzen setTimeouts sicherstellen, dass der Ladevorgang ausgeführt wird, nachdem die DOM-Struktur und der Lottie-Player bereit sind, was die Stabilität verbessert.

Implementierungsschritte und Beispielcode

1. Anpassung der HTML-Struktur

Ändern Sie zunächst die HTML-Struktur von lottie-player, entfernen Sie das src-Attribut und verwenden Sie data-src, um den Pfad zur Animationsdatei anzugeben. Gleichzeitig können Sie dem Lottie-Player einen Klassennamen hinzufügen, um die Auswahl in JavaScript zu erleichtern.

 <div class="slick-carousel hero-slider-content">
  <div class="tip">
    <div class="animation">
      <lottie-player class="lottie-player-item" data-src="/path/to/your/animation1.json" hintergrund="transparent" geschwindigkeit="1" richtung="1" mode="normal" schleife autoplay></lottie-player>
    </div>
  </div>

  <div class="tip">
    <div class="animation">
      <lottie-player class="lottie-player-item" data-src="/path/to/your/animation2.json" hintergrund="transparent" geschwindigkeit="1" richtung="1" mode="normal" schleife autoplay></lottie-player>
    </div>
  </div>
  <!-- Weitere Folien -->
</div>

veranschaulichen:

• data-src: Der Pfad, der zum Speichern von Lottie-Animations-JSON-Dateien verwendet wird.
• class="lottie-player-item": Praktische Positionierung des JavaScript-Selektors.
• Autoplay: Auch bei verzögertem Laden möchten wir, dass die Animation nach dem Laden automatisch abgespielt wird.

2. JavaScript-Initialisierungslogik

Schreiben Sie als Nächstes JavaScript-Code, um das Slick Carousel zu initialisieren und das Laden der Lottie-Animation in seinem Init-Ereignis zu verwalten.

 jQuery(document).ready(function($) {
    var $el = $(".hero-slider-content"); // Wählen Sie Ihren Slick Carousel-Container aus // Hören Sie sich das „init“-Ereignis des Slick Carousel an $el.on("init", function (event, slick) {
        // setTimeout verwenden, um das Laden der Lottie-Animation zu verzögern // Stellen Sie sicher, dass die DOM-Operation von Slick Carousel abgeschlossen ist und der Lottie-Player genügend Zeit hat, setTimeout(function () { zu initialisieren
            // Alle Lottie-Player-Elemente mit einem bestimmten Klassennamen durchlaufen $(".lottie-player-item").each(function () {
                var animationPath = $(this).attr("data-src"); // Holen Sie sich den data-src-Attributwert if (animationPath && this.load) { // Überprüfen Sie, ob der Pfad existiert und die Lademethode verfügbar ist this.load(animationPath); // Rufen Sie die Lademethode von Lottie-Player auf, um die Animation zu laden}
            });
        }, 1000); // 1 Sekunde Verzögerung, kann je nach tatsächlicher Situation angepasst werden });

    //Slick Carousel initialisieren
    $el.slick({
        unendlich: falsch,
        slidesToShow: 1,
        slidesToScroll: 1,
        Pfeile: falsch,
        Punkte: wahr,
        autoplay: false, // Das Autoplay des Karussells selbst kann unabhängig gesteuert werden autoplaySpeed: 3000,
    });
});

veranschaulichen:

• jQuery(document).ready(...): Stellen Sie sicher, dass das DOM vollständig geladen ist, bevor Sie den Code ausführen.
• $el.on("init", function (event, slick) { ... });: Dies ist der von Slick Carousel bereitgestellte Event-Hook, der ausgelöst wird, wenn das Karussell zum ersten Mal initialisiert wird.
• setTimeout(function () { ... }, 1000);: Schlüsselschritt. Die Verzögerung von 1000 Millisekunden (1 Sekunde) soll dem Slick Carousel und dem Lottie-Player genügend Zeit geben, ihre internen DOM-Operationen und Komponenteninitialisierung abzuschließen. Ohne diese Verzögerung wird die Lottie-Animation möglicherweise immer noch nicht richtig geladen.
• $(".lottie-player-item").each(function () { ... });: Alle Lottie-Player-Elemente durchlaufen, die Lottie-Animationen laden müssen.
• $(this).attr("data-src"): Ruft den zuvor gespeicherten JSON-Pfad der Animation ab.
• this.load(animationPath): Dies ist die vom benutzerdefinierten Element „lottie-player“ bereitgestellte Methode, mit der die Lottie-Animation des angegebenen Pfads manuell geladen wird. Stellen Sie sicher, dass das Lottie-Player-Skript in Ihr Projekt eingeführt wurde.

Dinge zu beachten

• Einführung der Lottie Player-Bibliothek: Stellen Sie sicher, dass das Lottie Player-Skript am Ende des oder der HTML-Datei korrekt eingefügt wird, zum Beispiel: .
• Verzögerungszeit für setTimeout: 1000 Millisekunden ist ein Erfahrungswert, der in den meisten Fällen gut funktioniert. Wenn Sie immer noch Probleme mit der Animation haben, können Sie versuchen, diese Verzögerung leicht zu erhöhen oder die optimale Verzögerung anhand der Protokolle der Browserkonsole zu ermitteln.
• Leistungsaspekte: Diese Methode lädt die Lottie-Animation in alle Folien, wenn das Slick Carousel initialisiert wird. Wenn sehr viele Folien vorhanden sind und jede Animationsdatei groß ist, kann dies Auswirkungen auf die Leistung beim Laden der Seite haben. Für eine erweiterte Optimierung können Sie erwägen, nur die Lottie-Animation in der aktuell sichtbaren Folie im afterChange-Ereignis des Slick Carousel zu laden und die Animation der nicht sichtbaren Folie zu entladen (sofern die Lottie Player-API dies unterstützt) oder anzuhalten.
• Fehlerbehandlung: In tatsächlichen Projekten können Sie einen Try-Catch-Block zu this.load() hinzufügen oder den Status des zurückgegebenen Versprechens überprüfen, um Fehler beim Laden von Animationen zu behandeln.

Zusammenfassen

Indem wir die Ladestrategie der Lottie-Animation von der anfänglichen Ladephase der Seite auf nach dem Init-Ereignis von Slick Carousel verschoben und mit dem data-src-Attribut und dem setTimeout-Mechanismus zusammengearbeitet haben, haben wir das Problem erfolgreich gelöst, dass die Lottie-Animation nicht in der ausgeblendeten Slick Carousel-Folie angezeigt wurde. Dieser Ansatz stellt sicher, dass Lottie-Animationen geladen und gerendert werden, wenn die DOM-Struktur stabil und sichtbar ist, was für ein stabileres und zuverlässigeres Benutzererlebnis sorgt.

Das obige ist der detaillierte Inhalt vonDie perfekte Kombination aus Slick Carousel und Lottie-Animation: verzögertes Laden und ereignisgesteuert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!