Как играть в GIF при нажатии (например, 9GaG.com) с помощью Wordpress?

Мне нужно реализовать этот "gif-плеер" на сайте wordpress, потому что gif-страницы до 6mb, поэтому производительность действительно дерьмовая

Я прочитал этот образ GIF для игры Onclick с jQuery и начните с начала также это Как играть в анимированный GIF с начала функции onclick, которые были почти решением, но я не знаю, как это должно быть сделано с wordpress в каждой записи

9gag.com делает это отлично; показывает изображение предварительного просмотра, воспроизводит gif onclick и останавливает gif, если его снова щелкнуть. Если нажать снова, снова воспроизвести gif с начала.

Как я могу выполнить это с помощью wordpress?

Ответ 1

Что 9GAG по существу сделал, это было два изображения: один был анимированным GIF, а другой был еще JPG.

Прежде чем вы щелкнете по нему, он отобразил файл JPG. После того как вы нажали на него, он загрузил GIF в тег <img> и заставил вас подумать, что он "воспроизвел" изображение GIF.

Если вы снова нажмете на него, он загрузит JPG файл обратно в тег <img> и заставит вас подумать, что он "приостановил" изображение GIF.

Обработка изображений, например, только с использованием одного GIF и паузы и игры, далеко, слишком сложно практично использовать - этот метод является одним из лучших способов сделать это.

Вот код:

<div id="gifdiv">
  <img src="staticgif.jpg" />
</div>
<script type="text/javascript">
  $("#gifdiv").click(function () {
    if ($(this).find("img").attr("data-state") == "static") {
      $(this).find("img").attr("src", "animatedgif.gif");
    } else {
      $(this).find("img").attr("src", "staticgif.jpg");
    }
  });
</script>

Кроме того, если вы хотите получить скорость, я думаю, что 9GAG делает это заранее, предварительно загружая GIF, например:

<script type="text/javascript">
  (new Image()).src = "animatedgif.gif"; // this would preload the GIF, so future loads will be instantaneous
</script>

Надеюсь, что это поможет.

Ответ 2

Если вы не хотите делать паузу, вы можете легко выполнить REIFAY gif файл. Просто нажмите на клик и перезагрузите gif в тег изображения.

your_image = document.getElementById или, тем не менее, вы хотите получить ссылку на изображение. затем установите прослушиватель событий для клика.

Затем your_image.src= your_image.src; И gif снова запустится.