Πώς να παίξετε κινούμενα GIFs onClick

Το κινούμενο GIF είναι ένας δημοφιλής τρόπος απεικόνισης μιας ιδέας σχεδίασης (εδώ είναι ένα παράδειγμα για το πώς το κάναμε για τα εφέ μετά κειμένου που δημιουργήθηκαν με το CSS) ή για την εμφάνιση ενός σύντομου βίντεο κλιπ. Αλλά αν έχετε πάρα πολλά από αυτά στην ίδια σελίδα, θα αποκλίνει η εστίαση του χρήστη σας. Για σελίδες που προβάλλουν πολλά GIF, αυτό είναι κακά νέα.

Η λύση: να εξυπηρετούν τους χρήστες με μια στατική εικόνα και να επιτρέπουν στο κινούμενο GIF να εκτελείται μόνο με κλικ του χρήστη. Σε αυτό το σύντομο φροντιστήριο θα σας δείξουμε πώς να το κάνετε ακριβώς αυτό.

• Προβολή επίδειξης
• Λήψη πηγής

Ξεκινώντας

Ξεκινήστε με την προετοιμασία των φακέλων και των αρχείων του έργου που περιλαμβάνουν: ένα αρχείο HTML, το jQuery και, τέλος, ένα αρχείο JavaScript στο οποίο θα γράψουμε τον κώδικα μας. Μπορείτε να συνδέσετε το jQuery σε ένα CDN ή να αρπάξετε το αντίγραφο και να το συνδέσετε στον κατάλογο του έργου σας. Θα αφήσω τα στυλ και το CSS στη φαντασία σου. Το πιο σημαντικό μέρος είναι το HTML markup έχει ως εξής:

Παρατηρήστε τα πρόσθετα data-alt χαρακτηριστικό στο img στοιχείο. Εδώ αποθηκεύουμε το GIF, στη θέση της στατικής εικόνας που αρχικά εξυπηρετούμε. Μπορείτε να προσθέσετε περισσότερες εικόνες και επίσης να προσθέσετε μια λεζάντα για κάθε μία από τις απόλαυση στοιχείο.

Μετά από αυτό, θα γράψουμε το JavaScript που θα φέρει τη μαγεία. Η ιδέα είναι η προβολή της εικόνας GIF όταν ο χρήστης κάνει κλικ στην εικόνα.

Το JavaScript

Αρχικά, δημιουργούμε μια συνάρτηση που θα ανακτήσει τη διαδρομή εικόνας GIF που έχουμε βάλει στο data-alt Χαρακτηριστικό. Θα βγούμε από κάθε εικόνα και θα χρησιμοποιήσουμε το jQuery .δεδομένα() τρόπο:

 var getGif = συνάρτηση () var gif = []; $ ('img') κάθε (συνάρτηση () var data = $ (this) .data ('alt'); gif.push (δεδομένα); επιστροφή gif;  var gif = getGif ();

Εκτελούμε τη λειτουργία και αποθηκεύουμε την έξοδο σε μια μεταβλητή gif, όπως παραπάνω. ο gif η μεταβλητή περιέχει τώρα τη διαδρομή του GIF από τις εικόνες στη σελίδα.

Εικόνα Προφόρτωση

Έχουμε τώρα ένα πρόβλημα φόρτωσης: με το GIF που δεν έχει φορτωθεί ακόμα, υπάρχει η πιθανότητα το κινούμενο GIF να μην αναπαράγεται αμέσως (δεδομένου ότι το πρόγραμμα περιήγησης θα χρειαστεί λίγα δευτερόλεπτα για να φορτώσει πλήρως το GIF). Αυτή η καθυστέρηση θα αισθανόταν πιο σημαντικά όταν το μέγεθος της εικόνας GIF είναι μεγάλο.

Πρέπει να προφορτώσουμε ή να φορτώσουμε τα GIF ταυτόχρονα καθώς φορτώνεται η σελίδα.

 // Προφόρτωση όλων των GIF. var εικόνα = []; $ .each (gif, λειτουργία (ευρετήριο)) image [index] = νέα εικόνα (); εικόνα [index] .src = gif [index];

Τώρα, ανοίξτε το DevTools και μετά κατευθυνθείτε προς το Δίκτυο (ή Πόροι) καρτέλα. Θα παρατηρήσετε ότι τα GIF έχουν ήδη φορτωθεί ακόμα κι αν αποθηκεύονται στο data-alt Χαρακτηριστικό. Και τα παρακάτω είναι όλος ο κώδικας που πρέπει να κάνετε.

Το τελευταίο κομμάτι του κώδικα είναι εκεί που συνδέουμε το καθένα φιγούρα στοιχείο που περιβάλλει την εικόνα με το Κάντε κλικ Εκδήλωση.

Ο κώδικας θα ανταλλάξει την πηγή εικόνας μεταξύ του src ιδιότητα όπου η στατική εικόνα εξυπηρετείται και το data-alt χαρακτηριστικό, όπου εκτελούμε αρχικά την εικόνα GIF.

Ο κώδικας θα επανέλθει επίσης στη στατική εικόνα καθώς ο χρήστης κάνει κλικ δευτερόλεπτα, “στάθμευση” το κινούμενο σχέδιο.

 $ ('figure') στο ('κλικ', λειτουργία () var $ this = $ (this), $ index = $ this.index (), $ img = $ this.children ($ imgExt [1] === $ imgExt = $ imgExt = $ imgExt = $ imgAlt.split ('.'); imgSrc = $ img.attr ('src'), $ imgAlt = $ img.attr 'alt') $ img.attr ('src', $ img.attr ('src', $ img.attr ('alt')) imgAlt) .attr ('data-alt', $ img.data ('alt'));).

Και αυτό είναι. Μπορείτε να γυαλίσετε τη σελίδα με στυλ, για παράδειγμα, μπορείτε να προσθέσετε ένα κουμπί αναπαραγωγής που επικαλύπτει την εικόνα για να υποδείξει ότι είναι “παικτός” ή ένα κινούμενο GIF.

Ελέγξτε τη δοκιμαστική έκδοση και κάντε λήψη της πηγής εδώ.

• Προβολή επίδειξης
• Λήψη πηγής