Onclick은 jQuery로 GIF 이미지를 재생하고 처음부터 시작합니다.


Answers

이것은 큰 이미지의 해결책이 될 것입니다. 이미지를 다시로드하지 않고 JavaScript에서 애니메이션 GIF를 다시 시작하십시오.

너트 쉘에서 자바 스크립트 변수에 이미지를로드 한 다음 클릭시 src를 바꾼다.

$(function(){
    var image = new Image();
       image.src='http://rack.3.mshcdn.com/media/ZgkyMDEyLzEwLzE5LzExXzMzXzMzXzE3Nl9maWxlCnAJdGh1bWIJMTIwMHg    5NjAwPg/462b8072';
     $('#img').click(function(){
       $(this).attr('src',image.src);
     }); 
 });

http://jsfiddle.net/GS427/1/

그 못생긴 나는 시작에 대한 올바른 이미지를 찾을 수 couldnt하지만 당신은 그것이 매번 같은 장소에서 시작한다는 것을 알 수 있습니다.

Question

이미지가있는 웹 사이트가 있습니다. 일부 이미지는 애니메이션 GIF 이미지입니다. 내가 한 것은 GIF의 정적 이미지를 보여주고 클릭 이벤트에서 실제 GIF 이미지가 표시됩니다.

여기 내 코드가 있습니다 :

JQuery

$(".theimage").click(function() {
$(this).addClass('hidden');
$(this).next().removeClass('hidden');
});
$(".theimage2").click(function() {
 $(this).addClass('hidden');
$(this).prev().removeClass('hidden');
});

HTML

<img class="theimage" src="image_static.gif" alt=""/>

<img class="theimage2 hidden" src="image_animated.gif" alt=""/>

CSS

.hidden{
display:none !important;
}

한 페이지에 두 개 이상의 GIF 이미지가있을 수 있으므로 이전 요소와 다음 요소의 클래스를 변경하므로 모든 요소에 대해 발생하는 동작을 방지 할 수 있습니다.

지금까지 그렇게 좋았습니다. 스크립트가 작동합니다. 내가 실제로 얻으려고하는 것은 GIF 이미지가 항상 처음부터 시작하는 것입니다. 현재로서는 처음으로 그렇게합니다. 그런 다음 백그라운드에서 계속 재생되는 것처럼 보이고 두 번째 통화에서 단순히 계속 재생됩니다. 때로는 그것도 얼어 버린 캐시와 관련이 있습니다.

내가 어떻게이 일을 할 수 있니?




마우스 이벤트를 mousedown과 mouseup으로 나누고 숨기기를 먼저 수행하고 mousedown에 두 번째 또는 viceversa를 표시 한 다음 먼저 숨기기를 수행하고 위로 또는 두 번째를 표시해야합니다.