GIF 애니메이션 재생/다시로드 GIF 클릭시

Question

GIF 애니메이션이 크고 GIF가로드 될 때까지로드 아이콘이 표시됩니다. 일단로드되면 GIF가 표시됩니다. 훌륭하게 작동하지만 "재생"버튼을 추가하여 GIF가 재생 (다시로드)되도록합니다.

코드로드 및 GIF에 대한 :

HTML

<div id="loader" class="loading img-center"></div> 

CSS

#loader { 
width: 600px; 
height: 450px; 
margin: auto; 
} 

#loader.loading { 
    background: url(/Images/ajax-loader.gif) no-repeat center center; 
    width:32px; 
    margin:auto ; 
} 

JS

var $j = jQuery.noConflict(); 
$j(function() { 
    var img = new Image(); 
    $j(img) 
    .load(function() { 
    $j(this).hide(); 
    $j('#loader') 
     .removeClass('loading') 
     .append(this); 

    $j(this).fadeIn(); 
    }) 
.error(function() { 
    }) 
.attr('src', '/2012/images/august/sailboat.gif'); 
}); 

위의 코드는 정상적으로 작동합니다. 이제 "새로 고침" "다시 재생"또는 코드에 대한 문제가 해결되지 :

HTML

<a id="refresh" href="#"> Replay Animation </a> 

JS

$j(function() { 
    $j("#refresh").click(function() { 
    $j("#loader").load("/2012/images/august/sailboat.gif") 
    }) 
}) 

내가 JS 일부 오류가 알고 있지만 JS에 대한 기술 부족으로 나는 무엇을해야하고 노력해야하는지 모른다. 어떤 도움이나 조언을 크게 주시면 감사하겠습니다!

감사합니다.

Answer 1

확인이 :

$j("#refresh").click(function() { 
    $j("#loader").find('img').attr("src", "/2012/images/august/sailboat.gif"); 
}); 

이전 코드에서와 같이 그렇게, $('#loader').load(..)가 작동하지 않습니다 #loader 내에서 이미지를 추가입니다. #loader 내의 이미지를 찾은 다음 해당 이미지의 src을 변경하십시오. 필요한 경우

Answer 2

또한 캐시에서 이미지 로딩을 피하기 위해 타임 스탬프를 추가 할 수 있습니다 :

$j("#refresh").click(function() { 
    var timestamp = new Date().getTime(); 
    $j('#loader').find('img').attr('src', '/2012/images/august/sailboat.gif'+'?'+timestamp); 
});