Kā spēlēt animētus GIF onClick

Animētais GIF ir populārs veids, kā vizualizēt dizaina koncepciju (šeit ir piemērs tam, kā mēs to darījām, lai izveidotu ar CSS izveidotu teksta teksta efektu) vai parādītu īsu videoklipu. Bet, ja jums tajā pašā lapā ir pārāk daudz, tas novirzīs jūsu lietotāja uzmanību. Lapām, kurās ir daudz GIF, šī ir slikta ziņa.

Atrisinājums: apkalpot lietotājus ar statisku attēlu un atļaut tikai animētam GIF darboties pēc lietotāja klikšķa. Šajā īsajā apmācībā mēs jums parādīsim, kā to darīt.

• Skatīt demonstrāciju
• Lejupielādēt avotu

Darba sākšana

Sāciet ar projektu mapju un failu sagatavošanu, kas ietver: HTML failu, jQuery un, visbeidzot, JavaScript failu, kurā mēs rakstīsim mūsu kodu. Jūs varat saistīt jQuery ar CDN vai paņemt kopiju un saistīt to ar savu projekta direktoriju. Es atstāju stilus un CSS jūsu iztēlei. Būtiskākā daļa ir HTML marķējums ir šāds:

Ievērojiet papildu data-alt atribūts img elementu. Tas ir tas, kur mēs glabājam GIF, statiskā attēla vietā, kuru mēs sākotnēji apkalpojām. Jūs varat pievienot vairāk attēlu un katram pievienot arī parakstu figūra elementu.

Pēc tam mēs rakstīsim JavaScript, kas dos burvību. Ideja ir sniegt GIF attēlu, kad lietotājs noklikšķina uz attēla.

JavaScript

Pirmkārt, mēs izveidojam funkciju, kas ielādēs GIF attēla ceļu, ko esam ievietojuši data-alt atribūts. Mēs caurlaidīsim katru attēlu un izmantosim jQuery .dati () metode to darīt:

 var getGif = funkcija () var gif = []; $ ('img') katrs (funkcija () var data = $ (tas) .data ('alt'); gif.push (dati);); atgriešanās gif;  var gif = getGif ();

Mēs palaižam funkciju un saglabājam rezultātu mainīgajā gif, kā iepriekš. The gif mainīgais tagad satur GIF ceļu no lapā esošajiem attēliem.

Attēla iepriekšēja ielāde

Tagad mums ir iekraušanas problēma: ja GIF vēl nav ielādēta, pastāv iespēja, ka animētais GIF netiks atskaņots uzreiz (jo pārlūkprogrammai vajadzēs dažas sekundes, lai pilnībā ielādētu GIF). Šis aizkavējums būtu jūtams, ja GIF attēla izmērs ir liels.

Mums ir nepieciešams iepriekš ielādēt vai ielādēt GIF vienlaicīgi, kad lapa tiek ielādēta.

 // Ielādēt visu GIF. var image = []; $ .each (gif, funkcija (indekss) image [index] = jauns attēls (); attēls [index] .src = gif [index];);

Tagad atveriet DevTools, tad dodies uz Tīkls (vai Resursi) cilne. Jūs pamanīsiet, ka GIF jau ir ielādēti, pat ja tie ir saglabāti data-alt atribūts. Un tas ir viss kods, kas jums jādara.

Pēdējais koda gabals ir tas, kur mēs katru saistām skaitlis elements, kas iesaiņo attēlu ar klikšķis notikumu.

Kods mainīs attēla avotu starp src atribūts, kur tiek rādīts statiskais attēls, un data-alt atribūts, kurā mēs sākotnēji kalpojam GIF attēlam.

Kods arī atgriezīsies pie statiskā attēla, kad lietotājs noklikšķinās uz otro reizi, “apstāšanās” animāciju.

 $ ('skaitlis') ieslēgts ('klikšķis', funkcija () var $ this = $ (tas), $ index = $ this.index (), $ img = $ this.children ('img'), $ imgSrc = $ img.attr ('src'), $ imgAlt = $ img.attr ('data-alt'), $ imgExt = $ imgAlt.split ('.'); ja ($ imgExt [1] === 'gif') $ img.attr ('src', $ img.data ('alt')). attr ('data-alt', $ imgSrc); cits $ img.attr ('src', $ imgAlt) .attr ('data-alt', $ img.data ('alt')););

Un tas viss. Jūs varat spīdēt lapu ar stiliem, piemēram, varat pievienot atskaņošanas pogu, kas pārklāj attēlu, lai norādītu, ka tas ir “spēlei” vai animētu GIF.

Apskatiet demonstrāciju un lejupielādējiet avotu šeit.

• Skatīt demonstrāciju
• Lejupielādēt avotu