애니메이션 GIF onClick을 재생하는 방법

애니메이션 GIF는 디자인 개념을 시각화하는 인기있는 방법입니다 (CSS로 만든 포스트 텍스트 효과에 대한 예가 여기 있습니다). 또는 짧은 비디오 클립을 보여줍니다. 그러나 같은 페이지에 너무 많은 것을 넣으면 사용자의 초점을 벗어날 것입니다.. 많은 GIF를 보여주는 페이지의 경우 이것은 나쁜 소식입니다..

해결책: 정적 이미지로 사용자에게 서비스를 제공하고 사용자가 클릭 할 때만 애니메이션 GIF가 실행되도록 허용. 이 짧은 튜토리얼에서는이를 수행하는 방법을 보여줍니다..

데모보기
소스 다운로드

시작하기

HTML 파일, jQuery 및 마지막으로 자바 스크립트 파일을 포함하는 프로젝트 폴더 및 파일을 준비하는 것으로 시작하여 코드를 작성합니다. jQuery를 CDN에 연결하거나 사본을 가져 와서 프로젝트 디렉토리에 연결할 수 있습니다. 나는 당신의 상상력에 스타일과 CSS를 남겨 둘 것입니다. 가장 중요한 부분은 다음과 같은 HTML 마크 업입니다.

추가 정보 데이터 alt 속성의 img 요소. 이것은 우리가 처음에 제공하는 정적 이미지 대신 GIF를 저장하는 곳입니다. 더 많은 이미지를 추가하고 각 이미지에 캡션을 추가 할 수 있습니다. 묘지 요소.

그 후에, 우리는 마술을 가져올 자바 스크립트를 작성할 것입니다. 아이디어는 사용자가 이미지를 클릭 할 때 GIF 이미지를 제공하는 것입니다..

자바 스크립트

먼저 GIF 이미지 경로를 검색 할 함수를 만듭니다. 데이터 alt 속성. 각 이미지를 반복하여 jQuery를 사용합니다. .데이터() 방법 :

 var getGif = function () var gif = []; $ ( 'img'). 각 (function () var data = $ (this) .data ( 'alt'); gif.push (data);); GIF를 반환;  var gif = getGif ();

함수를 실행하고 출력을 변수에 저장합니다. gif, 위와 같이. 그만큼 gif 변수에는 이제 페이지의 이미지에서 GIF 경로가 포함됩니다..

이미지 사전로드

이제로드 문제가 있습니다. GIF가 아직로드되지 않은 상태에서 애니메이션 GIF가 즉시 재생되지 않을 가능성이 있습니다 (브라우저에서 GIF를 완전히로드하는 데 몇 초가 걸릴 수 있기 때문입니다). 이 지연은 GIF 이미지 크기가 클 때 더 크게 느껴질 것입니다.

페이지가로드 될 때 미리로드하거나 GIF를 동시에로드해야합니다..

 // 모든 GIF를 미리로드합니다. var image = []; $ .each (gif, function (index) 이미지 [인덱스] = 새 이미지 (); 이미지 [인덱스] .src = gif [인덱스];);

이제 DevTools를 열어서 회로망 (또는 자원) 탭. GIF가 이미로드되어 있어도 GIF가로드되었음을 알 수 있습니다. 데이터 alt 속성. 그리고 다음은 그렇게해야하는 모든 코드입니다..

마지막 코드는 각 요소를 바인딩하는 부분입니다. 그림 이미지를 딸깍 하는 소리 행사.

코드는 이미지 소스를 src 정적 이미지가 게재되는 속성 및 데이터 alt 우리가 처음에 GIF 이미지를 제공하는 속성.

사용자가 두 번째 클릭 할 때 코드가 정적 이미지로 되돌아갑니다., “멎는” 애니메이션.

 $ img = $ this.children ( 'img'), $ (this), $ this.index ($) $ imgAlt = $ img.attr ( 'data-alt'), $ imgExt = $ imgAlt.split ( '.'); if ($ imgExt [1] ===) imgSrc = $ img.attr ( 'src' 'data-alt', $ imgSrc); else $ img.attr ( 'src', $ gg ') $ img.attr ('src ', $ img.data ('alt ' imgAlt) .attr ( 'data-alt', $ img.data ( 'alt'));));

그리고 그게 다야. 스타일을 사용하여 페이지를 연마 할 수 있습니다. 예를 들어, 이미지 위에 겹쳐져있는 재생 버튼을 추가하여 스타일이 있음을 나타낼 수 있습니다 “할 수 있는” 또는 애니메이션 GIF.

데모를 확인하고 소스를 여기에서 다운로드하십시오..

데모보기
소스 다운로드