2012-10-12 6 views
5

페이지에 7 개의 gif 파일이 있습니다.gif 파일을 동기화하는 방법이 있습니까?

모두 동기화 할 수있는 방법이 있습니까? 그렇다면 동시에 재생되기 시작합니까?

내가 미리로드 할 생각 이었지만로드하는 데 시간이 오래 걸리는 경우 동기화가 시작되지 않을 수도 있습니다.

+5

당신은 javascript (또는 자바 스크립트 라이브러리)로 gif 파일을 시작할 수 없습니다. 당신이 할 수있는 최선의 방법은 미리로드 한 다음 모두로드 된 후에 동시에 src를 리셋하는 것입니다. 그러면 다시 시작할 수 있습니다. – Archer

+0

이것이 아처의 대답이라고 생각했습니다. "src 재설정"이란 무엇입니까? – williamsongibson

+0

두 가지 방법이 있습니다. 페이지에 이미지가 있고 완전히로드되도록하거나 페이지의 이미지를 숨겨서 스크립트에있는 이미지 객체를 사용하여 메모리에로드하십시오. 모두로드되면 페이지의 각 이미지에 대해 src를 설정하기 만하면됩니다. src를 다시 설정함으로써 src 속성을 이미 $ { "img"}로 설정했다는 의미 일뿐입니다. (function() {$ (this) [0] .src = $ (this) [0]. src;});' – Archer

답변

10

@Archer가 위에서 지적한 것처럼, 그것을 수행하는 한 가지 방법은 미리로드 한 다음 src를 다시 설정하는 것입니다.

$(window).load(function() { 
    $('.preload').attr('src', function(i,a){ 
     $(this).attr('src','').removeClass('preload').attr('src',a); 
    }); 
}); 

jsfiddle에 그것을 참조 : jQuery를 사용하면 같은 일을 할 수 있습니다.

-2

페이지 헤드에서 모두 미리로드하고 본체가로드 될 때 실행하십시오. 함수 function gifs{}을 만들고 다음과 같이 실행하십시오 : <body onload="gifs()">.

1

내용 유형에 따라 gif를 png 시퀀스 (스프라이트 시트)로 바꾸거나 심지어 jpg 시퀀스로 바꾸는 것을 고려해보십시오.

원하는 애니메이션 크기의 div를 만들고, 오버플로가 숨겨진 배경 이미지로 스프라이트 시트를 설정하십시오.

모든 틱과 동시에 모든 애니메이션 (배경 이미지 위치)을 업데이트하는 자바 스크립트로 타이머를 만들면 프레임 속도를 매우 정확하게 제어 할 수 있습니다.

필자는이 기술을 이전에 사용했으며 스프라이트 시트가로드 시간에 영향을 미치지 않는 경우 잘 작동합니다.

관련 문제