Jak odtwarzać animowane GIFy naClick

Animowany GIF to popularny sposób na wizualizację koncepcji projektu (oto przykład, jak zrobiliśmy to dla efektów posttekstowych utworzonych za pomocą CSS) lub pokazanie krótkiego klipu wideo. Ale jeśli masz ich zbyt wiele na tej samej stronie, będzie to odbiegać od skupienia użytkownika. Dla stron prezentujących wiele GIFów jest to zła wiadomość.

Rozwiązanie: obsługuj użytkowników statycznym obrazem i zezwalaj na animowane GIF po uruchomieniu przez użytkownika. W tym krótkim samouczku pokażemy, jak to zrobić.

• Wyświetl demo
• Pobierz źródło

Rozpoczęcie pracy

Zacznij od przygotowania folderów i plików projektu, które zawierają: plik HTML, jQuery, a na koniec plik JavaScript, w którym będziemy pisać nasz kod. Możesz połączyć jQuery z CDN lub pobrać kopię i połączyć ją z katalogiem projektu. Pozostawiłbym style i CSS twojej wyobraźni. Najważniejszą częścią jest znacznik HTML w następujący sposób:

Zwróć uwagę na dodatkowe dane-alt atrybut w img element. Tutaj przechowujemy GIF zamiast statycznego obrazu, który początkowo obsługujemy. Możesz dodać więcej obrazów, a także dodać podpis dla każdego z nich fig element.

Potem napiszemy JavaScript, który przyniesie magię. Pomysł polega na wyświetlaniu obrazu GIF, gdy użytkownik kliknie obraz.

JavaScript

Najpierw tworzymy funkcję, która pobierze ścieżkę obrazu GIF, którą umieściliśmy w dane-alt atrybut. Przejdziemy przez każdy obraz i użyjemy jQuery .dane() metoda to zrobić:

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

Uruchamiamy tę funkcję i zapisujemy dane wyjściowe w zmiennej gif, jak wyżej. The gif zmienna zawiera teraz ścieżkę GIF ze zdjęć na stronie.

Wstępne ładowanie obrazu

Mamy teraz problem z ładowaniem: gdy GIF nie jest jeszcze załadowany, istnieje szansa, że ​​animowany GIF nie odtworzy się od razu (ponieważ przeglądarka potrzebowałaby kilku sekund, aby w pełni załadować GIF). To opóźnienie byłoby znacznie bardziej odczuwalne, gdy rozmiar obrazu GIF jest duży.

Musimy wstępnie załadować lub załadować pliki GIF jednocześnie podczas ładowania strony.

 // Wczytaj wszystkie pliki GIF. var image = []; $ .each (gif, function (index) image [index] = new Image (); image [index] .src = gif [index];);

Teraz otwórz DevTools, a następnie udaj się do Sieć (lub Zasoby) zakładka. Zauważysz, że GIF są już załadowane, nawet jeśli są zapisane w dane-alt atrybut. A oto cały kod, którego potrzebujesz.

Ostatnim elementem kodu jest miejsce, w którym jesteśmy związani postać element, który zawija obraz za pomocą Kliknij zdarzenie.

Kod zamieni źródło obrazu między src atrybut, w którym wyświetlany jest obraz statyczny i dane-alt atrybut, w którym początkowo obsługujemy obraz GIF.

Kod powróci również do statycznego obrazu, gdy użytkownik kliknie po raz drugi, “zatrzymanie” animacja.

 $ ('figure'). 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')););

I to wszystko. Możesz polerować stronę za pomocą stylów, na przykład możesz dodać przycisk odtwarzania nakładający obraz, aby wskazać, że tak jest “grywalne” lub animowany GIF.

Sprawdź demo i pobierz źródło tutaj.

• Wyświetl demo
• Pobierz źródło