Gabungan sempurna karusel licin dan animasi lottie: pemuatan malas dan acara didorong

Artikel ini bertujuan untuk menyelesaikan masalah animasi Lottie yang tidak memaparkan dengan betul dalam slaid karusel licin. Penyelesaian teras adalah untuk menyimpan laluan JSON dari animasi Lottie dalam atribut `data-src` dan bukannya menggunakan` src` secara langsung, dan menggunakan `init` peristiwa carousel licin dengan mekanisme` setTimeout` untuk memuatkan secara manual dan memainkan animasi lottie selepas inisialisasi carousel.

Cabaran: Memberi masalah animasi lottie dalam elemen tersembunyi

Apabila menggunakan Perpustakaan Animasi Lottie (melalui Elemen Custom Lottie-Player) digabungkan dengan plug-in Carousel Carousel yang licin, pemaju sering menghadapi masalah: Animasi Lottie tidak dapat bermain atau dipaparkan dengan betul dalam slaid karusel licin, tetapi ia berfungsi dengan baik di luar karusel. Sebabnya ialah untuk mencapai kesan penukaran slaid, Carousel licin akan menetapkan slaid aktif secara tidak langsung untuk dipaparkan: Tiada. Pemain Lottie, terutamanya apabila cuba memuatkan dan memainkan animasi secara langsung melalui atribut SRC pada beban halaman, mungkin tidak memulakan atau menjadikan kandungan animasi dengan betul kerana elemen tuan rumahnya tersembunyi. Apabila diperiksa dalam penyemak imbas, elemen Lottie-Player mungkin wujud, tetapi kandungan animasi Lottie di dalamnya hilang.

Idea teras penyelesaian: pemuatan malas dan didorong acara

Untuk mengatasi halangan rendering yang disebabkan oleh paparan: Tiada, kita perlu menukar strategi pemuatan animasi Lottie. Idea teras adalah seperti berikut:

1. Kelewatan Lottie Animation Loading: Daripada menetapkan atribut SRC secara langsung pada elemen Lottie-Player, simpan jalan ke fail JSON animasi dalam atribut data-SRC tersuai.
2. Menggunakan peristiwa inisialisasi Carousel yang licin: Selepas Carousel Slick dimulakan sepenuhnya dan struktur DOM disediakan, mencetuskan pemuatan animasi Lottie dengan mendengar acara initnya.
3. Muatkan Lottie Animation secara manual: Dalam Panggilan Acara Init, melintasi semua elemen Lottie-Player, mendapatkan nilai atribut data-Src mereka, dan panggil kaedah Load () pemain Lottie untuk memuat secara manual dan memainkan animasi secara manual.
4. Memperkenalkan SetTimeout: Oleh kerana panggilan balik init Carousel Slick boleh dicetuskan sebelum DOM sepenuhnya stabil, atau pemain Lottie itu sendiri memerlukan masa inisialisasi tertentu, memperkenalkan setTimeout pendek dapat memastikan operasi pemuatan dilakukan setelah struktur DOM dan pemain Lottie siap, meningkatkan kestabilan.

Langkah pelaksanaan dan kod sampel

1. Pelarasan Struktur HTML

Pertama, ubah suai struktur HTML Lottie-Player, keluarkan atribut SRC, dan gunakan data-src untuk menentukan laluan ke fail animasi. Pada masa yang sama, anda boleh menambah nama kelas kepada Lottie-Player untuk pemilihan mudah dalam JavaScript.

 <div class="slick-carousel wira-slider-content">
  <div class="tip">
    <div class="animation">
      <lottie-player kelas="Lottie-player-item" data-src="/path/to/your/animation1.json" latar belakang="telus" kelajuan="1" arah="1" mod="normal" gelung autoplay> </lottie-player>
    </div>
  </div>

  <div class="tip">
    <div class="animation">
      <lottie-player kelas="Lottie-player-item" data-src="/path/to/your/animation2.json" latar belakang="telus" kelajuan="1" arah="1" mod="normal" gelung autoplay> </lottie-player>
    </div>
  </div>
  
</div>

menggambarkan:

• Data-SRC: Laluan yang digunakan untuk menyimpan fail JSON animasi lottie.
• Kelas = "Lottie-Player-Item": Posisi pemilih JavaScript yang mudah.
• Autoplay: Walaupun dengan pemuatan malas, kami masih mahu animasi bermain secara automatik selepas memuatkan.

2. Logik Inisialisasi JavaScript

Seterusnya, tulis kod JavaScript untuk memulakan karusel licin dan mengendalikan pemuatan animasi Lottie dalam acara initnya.

 jQuery (dokumen) .ready (fungsi ($) {
    var $ el = $ (". Hero-slider-content"); // Pilih bekas Carousel Slick anda // Dengarkan acara 'init' carousel yang licin $ el.on ("init", fungsi (event, slick) {
        // Gunakan setTimeout untuk melambatkan pemuatan animasi lottie // pastikan operasi dom slick carousel selesai dan pemain lottie mempunyai masa yang cukup untuk memulakan setTimeout (fungsi () {
            // melintasi semua elemen lottie-player dengan nama kelas tertentu $ (". Lottie-player-item"). Setiap (fungsi () {
                var animationpath = $ (this) .attr ("data-src"); // Dapatkan nilai atribut data-src jika (animationpath && this.load) {// periksa sama ada jalan wujud dan kaedah beban tersedia ini.load (animationpath); // panggil kaedah beban lottie-player untuk memuatkan animasi}
            });
        }, 1000); // 1 kelewatan kedua, boleh diselaraskan mengikut situasi sebenar});

    // Inisialisasi Carousel Slick
    $ el.slick ({
        tak terhingga: palsu,
        Slidestoshow: 1,
        slidestoscroll: 1,
        anak panah: palsu,
        titik: benar,
        Autoplay: Palsu, // Autoplay karusel itu sendiri boleh dikawal secara bebas secara automatik: 3000,
    });
});

menggambarkan:

• jQuery (dokumen) .ready (...): Pastikan DOM dimuatkan sepenuhnya sebelum melaksanakan kod.
• $ el.on ("init", fungsi (event, slick) {...});: Ini adalah peristiwa cangkuk yang disediakan oleh Slick Carousel, yang dicetuskan apabila karusel pertama kali diinisialisasi.
• setTimeout (fungsi () {...}, 1000);: Langkah utama. Kelewatan 1000 milisaat (1 saat) adalah untuk memberikan karusel licin dan lottie-player cukup masa untuk menyelesaikan operasi DOM dalaman dan inisialisasi komponen mereka. Tanpa kelewatan ini, animasi Lottie mungkin masih tidak dimuatkan dengan betul.
• $ (". Lottie-player-item"). Setiap (fungsi () {...});
• $ (this) .attr ("data-src"): Dapatkan jalan animasi JSON yang disimpan sebelumnya.
• this.load (AnimationPath): Ini adalah kaedah yang disediakan oleh Elemen Custom Lottie-Player, yang digunakan untuk memuatkan animasi lottie secara manual dari laluan yang ditentukan. Pastikan skrip Lottie-Player telah diperkenalkan ke dalam projek anda.

Perkara yang perlu diperhatikan

• Pengenalan Perpustakaan Player Lottie: Pastikan skrip pemain Lottie diperkenalkan dengan betul di bahagian bawah atau fail HTML, contohnya:
• Masa kelewatan untuk setTimeout: 1000 milisaat adalah nilai empirikal yang berfungsi dengan baik dalam kebanyakan kes. Jika anda masih mempunyai masalah dengan animasi, anda boleh cuba meningkatkan kelewatan ini sedikit, atau menilai kelewatan optimum dengan memerhatikan log konsol penyemak imbas.
• Pertimbangan Prestasi: Kaedah ini akan memuatkan animasi Lottie dalam semua slaid apabila karusel licin dimulakan. Sekiranya terdapat sebilangan besar slaid dan setiap fail animasi adalah besar, mungkin terdapat beberapa kesan pada prestasi pemuatan halaman. Untuk pengoptimuman yang lebih maju, anda boleh mempertimbangkan untuk memuatkan hanya animasi Lottie dalam slaid yang kini kelihatan dalam acara afterchange Carousel yang licin, dan memunggah (jika Lottie Player API menyokongnya) atau menjeda animasi slaid yang tidak dapat dilihat.
• Pengendalian ralat: Dalam projek sebenar, anda boleh menambah blok percubaan untuk ini.load () atau periksa status janji yang dikembalikan untuk mengendalikan kegagalan pemuatan animasi.

Meringkaskan

Dengan mengalihkan strategi pemuatan animasi Lottie dari peringkat pemuatan awal halaman untuk selepas peristiwa init carousel licin, dan bekerjasama dengan atribut data-Src dan mekanisme setTimeout, kami berjaya menyelesaikan masalah animasi Lottie yang tidak dipaparkan dalam slaid karusel licin tersembunyi. Pendekatan ini memastikan bahawa animasi Lottie dimuatkan dan diberikan apabila struktur DOM stabil dan kelihatan, memberikan pengalaman pengguna yang lebih stabil dan boleh dipercayai.

Atas ialah kandungan terperinci Gabungan sempurna karusel licin dan animasi lottie: pemuatan malas dan acara didorong. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!