워드프레스를 사용하여 클릭 시(9GaG.com 등) GIF를 재생하는 방법

워드프레스를 사용하여 클릭 시(9GaG.com 등) GIF를 재생하는 방법

gif 페이지가 최대 6MB이기 때문에 성능이 매우 형편없기 때문에 워드프레스 사이트에 이 "gif 플레이어"를 구현해야 합니다.

JQuery에서 GIF 이미지를 재생하는 온클릭 방법은 처음부터 애니메이션 GIF를 재생하는 방법은 거의 해결 방법이었습니다만, 모든 엔트리에서 워드프레스로 어떻게 해야 하는지 모르겠습니다.

9gag.com은 이를 완벽하게 수행하며 미리보기 이미지를 표시하고 클릭 시 gif를 재생하며 다시 클릭하면 gif를 중지합니다.다시 클릭하면 처음부터 gif가 재생됩니다.

워드프레스로 어떻게 하면 좋을까요?

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>

이게 도움이 됐으면 좋겠다.

일시정지하고 싶지 않으면 쉽게 gif 파일을 재생할 수 있습니다.클릭할 때 트리거하여 이미지 태그에 gif를 다시 로드합니다.

your_image= document.getElementById 또는 이미지에 대한 참조를 가져옵니다.클릭할 이벤트청취자를 설정합니다.

그리고 당신의_이미지.src= your_image.src; 그러면 gif가 다시 실행됩니다.

언급URL : https://stackoverflow.com/questions/20916166/how-to-play-a-gif-on-click-like-9gag-com-with-wordpress