웹 페이지에서 GIF 애니메이션 - 다시 시작하는 방법은 무엇입니까?

Question

다음과 같은 시나리오가 있습니다 :
내 웹 사이트의 특정 섹션에는 배경 이미지와 다른 이미지가 겹쳐져있는 (배경 : 절대 위치 사용) 800x600 섹션이 있습니다. 이러한 이미지 중 하나를 클릭하면 이미지가 애니메이션 GIF와 스왑되어 마치 무언가가 일어난 것처럼 보입니다. 이러한 애니메이션은 대개 한 번 실행됩니다 (반복되지 않음).
사전 정의 된 애니메이션 기간이 지나면 애니메이션 GIF가 원래 정적 이미지로 바뀝니다.

애니메이션 GIF를 다운로드하는 데 걸리는 시간을 알 수 없기 때문에 모든 항목이 정상적으로 작동합니다. 항목을 클릭 할 가능성이 있으며 전체 애니메이션 기간 동안 아무 것도 나타나지 않습니다.
이 문제에 대한 해결책은 간단합니다. 이미지를 미리로드하십시오. 그리고, 실제로, 나는 필요한 모든 이미지를 미리로드하기 위해 PxLoader을 사용하고 있습니다.

그러나 이것은 일부 브라우저에서 새로운 문제를 야기합니다. 애니메이션이 한 번 재생되고 다시 재생되지 않습니다. Firefox에서는 제대로 작동하는 것 같습니다 (클릭하면 애니메이션이 재생되고 다시 클릭하면 애니메이션이 다시 재생됩니다). 그러나 IE에서는 작동하지 않는 것 같습니다 (클릭하면 애니메이션의 마지막 프레임이 표시됨). 나는 내 문제를 보여주기 위해 jsFiddle을 설정 한

: jsfiddle.net/xJveS/4/

내 옵션은 무엇입니까? 다음에 그것을 표시 할 때 GIF가 다시 재생되도록 "재설정"할 수 있습니까?

업데이트

나는 애니메이션 GIF를 위해 PxLoader을 대체하기 위해 내 자신의 (아주 기본) 프리 로더 클래스를 구축 결국, 그것이 문제를 겪지 않는다. GIF를 클릭하면 정상적으로 재생됩니다. 즉, 내 모든 문제는 PxLoader에만 해당되는 문제입니다. 지금 내 문제는 내 자신의 로더를 사용하여 "해결"하지만 해결해야 할 PxLoader에 여전히 문제가 있습니다.

Answer 1

GIF를 숨겨진 div에로드하고 필요할 때 대상 위치에 태그를 추가하십시오. 브라우저는 첫 번째 요청에서 캐시하여 즉시 표시해야합니다.

Answer 2

AFAIK, JavaScript에서 .gif를 다시 시작할 수 없습니다.

마지막에 검색어 문자열과 함께 src를 설정하여 다시로드 할 수 있어야합니다. (미안 해요, 내가 롤, 내 시간을 효율적으로 jQuery를 사용하고 있습니다)

$('#myImg').attr('src', $('#myImg').attr('src') + '?' + (new Date()).valueOf()); 

단점은 그것이 다시 시작하기 전에 다시 다운로드 할 수있는 GIF를 강제 것이다. 따라서 다음으로 할 일은 새로운 src에서 대체 gif를 미리로드하는 일종의 프리 로더를 구현하는 것입니다.

var rplImg; 
function preloadReplacement() { 
rplImg = new Image(); 
var d = new Date(); 
rplImg.src = "some.gif?" + d.valueOf(); 
} 
$(function() { 
    preloadReplacement(); 
    $('#myImg').click(function(){ 
     $(this).attr('src', rplImg.src); 
     preloadReplacement(); 
    }); 
}); 

이 안된이지만, 기본적인 생각이다.