Cara Memainkan GIF animasi onClick

GIF Animasi adalah cara yang popular untuk memvisualisasikan konsep reka bentuk (inilah contoh bagaimana kita melakukannya untuk kesan teks pos yang dibuat dengan CSS) atau memamerkan klip video pendek. Tetapi jika anda mempunyai terlalu banyak daripada mereka dalam halaman yang sama, ia akan menyimpang fokus pengguna anda. Untuk halaman yang mempamerkan banyak GIF, ini adalah berita buruk.

Penyelesaian: berkhidmat kepada pengguna dengan imej statik dan hanya membenarkan animasi GIF dijalankan semasa klik pengguna. Dalam tutorial ringkas ini, kami akan menunjukkan kepada anda bagaimana untuk melakukannya.

• Lihat Demo
• Muat turun Sumber

Bermula

Mulakan dengan menyediakan folder dan fail projek yang termasuk: fail HTML, jQuery, dan akhirnya fail JavaScript di mana kami akan menulis kod kami. Anda boleh memautkan jQuery ke CDN atau ambil salinan itu dan hubungkannya ke direktori projek anda. Saya akan meninggalkan gaya dan CSS untuk imaginasi anda. Bahagian yang paling penting ialah markup HTML adalah seperti berikut:

Perhatikan tambahan data-alt atribut dalam img elemen. Ini adalah tempat kami menyimpan GIF, sebagai ganti imej statik yang kami mulakan. Anda boleh menambah lebih banyak imej dan juga menambahkan kapsyen untuk setiap melalui figcaption elemen.

Selepas itu, kami akan menulis JavaScript yang akan membawa keajaiban itu. Idea ini adalah untuk menyampaikan imej GIF apabila pengguna mengklik pada imej.

JavaScript

Pertama, kami mencipta satu fungsi yang akan mengambil laluan imej GIF yang telah kami masukkan di dalam data-alt atribut. Kami akan gelung melalui setiap imej dan menggunakan jQuery .data () kaedah untuk melakukannya:

 var getGif = function () var gif = []; $ ('img'). setiap (fungsi () var data = $ (ini) .data ('alt'); gif.push (data);); kembali gif;  var gif = getGif ();

Kami menjalankan fungsi dan menyimpan output dalam pemboleh ubah gif, seperti di atas. The gif pembolehubah kini mengandungi laluan GIF daripada imej dalam halaman.

Imej Pra-memuatkan

Kami kini mempunyai masalah pemuatan: dengan GIF belum dimuatkan, terdapat peluang bahawa GIF animasi tidak akan bermain dengan serta-merta (kerana penyemak imbas memerlukan beberapa saat untuk memuatkan GIF sepenuhnya). Kelewatan ini akan dirasakan lebih ketara apabila saiz imej GIF adalah besar.

Kita perlu pra-beban, atau memuatkan GIF secara serentak apabila halaman dimuatkan.

 // Pramuat semua GIF. var image = []; $ .each (gif, function (index) image [index] = new Image (); image [index] .src = gif [index];);

Sekarang, buka DevTools kemudian menuju ke Rangkaian (atau Sumber) tab. Anda akan melihat bahawa GIF telah dimuatkan walaupun disimpan di dalam data-alt atribut. Dan yang berikut adalah semua kod yang perlu anda lakukan.

Sekeping terakhir kod adalah di mana kita mengikat setiap angka elemen yang membalut imej dengan klik acara.

Kod ini akan menukar sumber imej antara src atribut di mana imej statik dihidangkan dan data-alt atribut di mana kami pada mulanya menyampaikan imej GIF.

Kod ini juga akan kembali kepada imej statik apabila pengguna mengklik kali kedua, “berhenti” animasi.

 ('klik', fungsi () var $ this = $ (this), $ index = $ this.index (), $ img = $ this.children ('img'), $ imgSrc = $ img.attr ('src'), $ imgAlt = $ img.attr ('data-alt'), $ imgExt = $ imgAlt.split ('.'); if ($ imgExt [1] === 'gif') $ img.attr ('src', $ img.data ('alt')) attr ('data-alt', $ imgSrc); else $ img.attr ('src' imgAlt) .attr ('data-alt', $ img.data ('alt')););

Dan itu sahaja. Anda boleh menggilap halaman dengan gaya, sebagai contoh, anda boleh menambah butang main yang memaparkan imej untuk menunjukkan bahawa ia “dimainkan” atau GIF animasi.

Lihat demo dan muat turun sumbernya di sini.

• Lihat Demo
• Muat turun Sumber