Come si gioca a GIF animate onClick

La GIF animata è un modo popolare per visualizzare un concetto di design (ecco un esempio di come lo abbiamo fatto per gli effetti di post-testo creati con CSS) o mostrare un breve video clip. Ma se ne hai troppi nella stessa pagina, devierà l'attenzione dell'utente. Per le pagine che mostrano molte GIF, questa è una brutta notizia.

La soluzione: fornire agli utenti un'immagine statica e consentire solo al GIF animato di essere eseguito con un clic dell'utente. In questo breve tutorial ti mostreremo come fare proprio questo.

• Visualizza la demo
• Scarica fonte

Iniziare

Inizia con la preparazione delle cartelle e dei file del progetto che includono: un file HTML, il jQuery e infine un file JavaScript in cui scriveremo il nostro codice. Puoi collegare jQuery a un CDN o prendere la copia e collegarla alla directory del tuo progetto. Vorrei lasciare gli stili e i CSS alla tua immaginazione. La parte più essenziale è la marcatura HTML è la seguente:

Si noti l'aggiuntivo Dati-alt attributo nel img elemento. Qui è dove memorizziamo la GIF, al posto dell'immagine statica che inizialmente serviamo. Puoi aggiungere più immagini e aggiungere anche una didascalia per ciascuna attraverso figcaption elemento.

Dopodiché, scriveremo il codice JavaScript che porterà la magia. L'idea è di servire l'immagine GIF quando l'utente fa clic sull'immagine.

Il JavaScript

Per prima cosa, creiamo una funzione che recuperi il percorso dell'immagine GIF che abbiamo inserito Dati-alt attributo. Effettueremo un ciclo di ciascuna immagine e useremo jQuery .dati() metodo per farlo:

 var getGif = function () var gif = []; $ ('img'). each (function () var data = $ (this) .data ('alt'); gif.push (data);); return gif;  var gif = getGif ();

Eseguiamo la funzione e salviamo l'output in una variabile gif, come sopra. Il gif variabile ora contiene il percorso della GIF dalle immagini nella pagina.

Pre-caricamento dell'immagine

Ora abbiamo un problema di caricamento: con la GIF non ancora caricata, c'è la possibilità che la GIF animata non venga riprodotta immediatamente (dal momento che il browser necessita di alcuni secondi per caricare completamente la GIF). Questo ritardo sarebbe percepito in modo più significativo quando la dimensione dell'immagine GIF è grande.

Abbiamo bisogno di pre-caricare, o caricare le GIF contemporaneamente mentre la pagina si sta caricando.

 // Precarica tutta la GIF. var image = []; $ .each (gif, function (index) image [index] = new Image (); image [indice] .src = gif [indice];);

Ora apri i DevTools e poi vai al Rete (o risorsescheda Noterai che le GIF sono già caricate anche se sono state salvate nel Dati-alt attributo. E il seguente è tutto il codice necessario per farlo.

L'ultimo pezzo del codice è dove leghiamo ciascuno figura elemento che avvolge l'immagine con il clic evento.

Il codice scambierà la sorgente dell'immagine tra il src attributo dove viene servita l'immagine statica e il Dati-alt attributo in cui inizialmente serviamo l'immagine GIF.

Il codice tornerà anche all'immagine statica mentre l'utente fa clic una seconda volta, “sosta” l'animazione.

 $ ('figura'). on ('click', 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')););

E questo è tutto. Puoi lucidare la pagina con gli stili, ad esempio puoi aggiungere un pulsante di riproduzione che si sovrappone all'immagine per indicare che lo è “giocabile” o una GIF animata.

Guarda la demo e scarica qui la fonte.

• Visualizza la demo
• Scarica fonte