Cara Memainkan GIF Animasi di Klik

GIF Animasi adalah cara populer untuk memvisualisasikan konsep desain (berikut adalah contoh bagaimana kami melakukannya untuk efek teks posting yang dibuat dengan CSS) atau memamerkan klip video pendek. Tetapi jika Anda memiliki terlalu banyak di halaman yang sama, itu akan menyimpang fokus pengguna Anda. Untuk halaman yang menampilkan banyak GIF, ini adalah berita buruk.

Solusinya: melayani pengguna dengan gambar statis dan hanya memungkinkan GIF animasi dijalankan saat klik pengguna. Dalam tutorial singkat ini kami akan menunjukkan kepada Anda bagaimana melakukan hal itu.

• Lihat Demo
• Sumber Unduhan

Mulai

Mulailah dengan menyiapkan folder dan file proyek yang meliputi: file HTML, jQuery, dan terakhir file JavaScript di mana kita akan menulis kode kita. Anda dapat menautkan jQuery ke CDN atau mengambil salinannya dan menautkannya ke direktori proyek Anda. Saya akan meninggalkan gaya dan CSS ke imajinasi Anda. Bagian yang paling penting adalah markup HTML adalah sebagai berikut:

Perhatikan tambahannya data-alt atribut dalam img elemen. Di sinilah kami menyimpan GIF, sebagai pengganti gambar statis yang awalnya kami layani. Anda dapat menambahkan lebih banyak gambar dan juga menambahkan keterangan untuk masing-masing gambar melalui figcaption elemen.

Setelah itu, kita akan menulis JavaScript yang akan membawa keajaiban. Idenya adalah untuk menyajikan gambar GIF ketika pengguna mengklik gambar tersebut.

JavaScript

Pertama, kita membuat fungsi yang akan mengambil jalur gambar GIF yang telah kita masukkan ke dalam data-alt atribut. Kami akan mengulang setiap gambar dan menggunakan jQuery .data() metode untuk melakukannya:

 var getGif = function () var gif = []; $ ('img'). masing-masing (function () var data = $ (this) .data ('alt'); gif.push (data);); kembali gif;  var gif = getGif ();

Kami menjalankan fungsi dan menyimpan output dalam variabel gif, seperti di atas. Itu gif variabel sekarang berisi jalur GIF dari gambar di halaman.

Pra-pemuatan gambar

Kami sekarang memiliki masalah pemuatan: dengan GIF belum dimuat, ada kemungkinan bahwa GIF animasi tidak akan diputar secara instan (karena browser akan memerlukan beberapa detik untuk memuat GIF sepenuhnya). Penundaan ini akan terasa lebih signifikan ketika ukuran gambar GIF besar.

Kita perlu melakukan pra-muat, atau memuat GIF secara bersamaan saat halaman dimuat.

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

Sekarang, buka DevTools kemudian menuju ke Jaringan (atau Sumber daya) tab. Anda akan melihat bahwa GIF sudah dimuat meskipun disimpan di Internet data-alt atribut. Dan berikut ini semua kode yang perlu Anda lakukan.

Bagian terakhir dari kode adalah tempat kita mengikat masing-masing angka elemen yang membungkus gambar dengan klik peristiwa.

Kode akan menukar sumber gambar antara src atribut tempat gambar statis disajikan dan data-alt atribut tempat kami awalnya menyajikan gambar GIF.

Kode juga akan kembali ke gambar statis saat pengguna mengklik untuk kedua kalinya, “henti” animasi.

 $ ('gambar'). on ('klik', function () 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 saja. Anda dapat memoles halaman dengan gaya, misalnya, Anda dapat menambahkan tombol putar overlay gambar untuk menunjukkan bahwa itu adalah “dimainkan” atau GIF animasi.

Lihat demo dan unduh sumbernya di sini.

• Lihat Demo
• Sumber Unduhan