Kaip žaisti animuotus GIF onClick

Animuotas GIF yra populiarus būdas vizualizuoti dizaino koncepciją (čia pateikiamas pavyzdys, kaip mes tai padarėme atlikdami teksto efektus, sukurtus su CSS), arba parodyti trumpą vaizdo įrašą. Bet jei jūs turite per daug jų tame pačiame puslapyje, jis nukryps nuo jūsų naudotojo dėmesio. Puslapiuose, kuriuose rodoma daug GIF, tai yra blogos naujienos.

Sprendimas: aptarnauti naudotojus su statiniu vaizdu ir leisti animuotam GIF paleisti tik paspaudus vartotoją. Šioje trumpoje pamokoje parodysime, kaip tai padaryti.

• Peržiūrėti demonstraciją
• Atsisiųsti šaltinį

Darbo pradžia

Pradėkite rengti projekto aplankus ir failus, kuriuose yra: HTML failas, jQuery ir galiausiai „JavaScript“ failas, kuriame mes parašysime kodą. Galite susieti jQuery su CDN arba patraukti kopiją ir susieti jį su savo projekto katalogu. Stilius ir CSS palieku jūsų vaizduotei. Svarbiausia dalis yra HTML žymėjimas:

Atkreipkite dėmesį į papildomą data-alt atributas img elementas. Čia saugome GIF, vietoj statinio vaizdo, kurį mes iš pradžių aptarnaujame. Galite pridėti daugiau nuotraukų ir taip pat pridėti antraštę kiekvienam figcaption elementas.

Po to parašysime „JavaScript“, kuri atneš magiją. Idėja yra aptarnauti GIF vaizdą, kai vartotojas spustelės vaizdą.

„JavaScript“

Pirma, mes sukuriame funkciją, kuri atgaus GIF vaizdo kelią, kurį mes įdėjome į data-alt atributas. Mes pasieksime kiekvieną vaizdą ir naudosime jQuery .duomenys () būdas tai padaryti:

 var getGif = funkcija () var gif = []; $ ('img') kiekvienas (funkcija () var data = $ (this) .data ('alt'); gif.push (data);); grįžti gif;  var gif = getGif ();

Mes atliekame funkciją ir išsaugome išvestį kintamajame gif, kaip aukščiau. The gif dabar kintamajame yra GIF kelias iš puslapiuose esančių vaizdų.

Vaizdo išankstinis įkėlimas

Dabar mes turime pakrovimo problemą: kai GIF dar nėra įkeltas, yra tikimybė, kad animuotas GIF neatkurs akimirksniu (kadangi naršyklei reikės kelių sekundžių, kad galėtumėte visiškai įkelti GIF). Šis vėlavimas taptų žymesnis, kai GIF vaizdo dydis yra didelis.

Privalome iš anksto įkelti arba įkelti GIF vienu metu, kai puslapis įkeliamas.

 // Įkelti visą GIF. var image = []; $ .each (gif, funkcija (indeksas) image [index] = naujas Image (); image [index] .src = gif [index];);

Dabar atidarykite DevTools, tada pereikite prie Tinklas (arba Ištekliai) skirtukas. Jūs pastebėsite, kad GIF jau įkeliami, net jei jie yra išsaugoti data-alt atributas. Ir visi šie kodai, kuriuos reikia padaryti.

Paskutinis kodo gabalas yra tas, kur mes susiejame kiekvieną skaičius elementas, kuris apgaubia vaizdą su spustelėkite įvykis.

Kodas pakeis vaizdo šaltinį tarp src atributas, kuriame aptarnaujamas statinis vaizdas, ir data-alt atributas, kuriame iš pradžių aptarnaujame GIF vaizdą.

Kodas taip pat grįš į statinį vaizdą, kai naudotojas spustelės antrą kartą, “sustojimas” animacija.

 $ („paveikslas“) įjungta („spustelėkite“, funkcija () var $ this = $ (tai), $ index = $ this.index (), $ img = $ this.children („img“), $ imgSrc = $ img.attr ('src'), $ imgAlt = $ img.attr ('data-alt'), $ imgExt = $ imgAlt.split ('.'); jei ($ imgExt [1] === 'gif') $ img.attr ('src', $ img.data ('alt')). attr ('data-alt', $ imgSrc); kitas $ img.attr ('src', $ imgAlt) .attr ('data-alt', $ img.data ('alt')););

Štai ir viskas. Pavyzdžiui, galite poliruoti puslapį su stiliais, pvz., Galite pridėti atvaizdavimo mygtuką, padengiantį vaizdą, nurodydami, kad jis yra “žaisti” arba animuotas GIF.

Patikrinkite demonstraciją ir atsisiųskite šaltinį čia.

• Peržiūrėti demonstraciją
• Atsisiųsti šaltinį