자바스크립트 이미지 리로드 image reset reload restart

 

자바스크립트 이미지 리로드 image reset reload restart

 

 

기존에 gif 의 경우 마우스 오버 시 전에 play 된 화면 이후로

이어서 paly 되게 됩니다.

 

그런데 마우스 오버시마다 gif 의 초기화 화면 부터 play 되게 해달라는 요청이 있었습니다.

 

방법은 간단합니다. 이미지 경로 뒤에 랜덤 값을 넣어주면됩니다.

 

<a href="#" class="jct jct1">
      <div class="layPop pop1">
            <h4>이미지</h4>
            <img src="../resource/images/pop_1.gif">
      </div>
</a>

 

 

 

 

 $('.jct').hover(
   function(){
        var d = new Date();    
        imgSrc = $(this).find('img').attr('src')+'?'+d.getTime();
        $(this).find('img').attr('src', imgSrc);
        $(this).find('div').css('display', 'block');
   },
   function(){
        $(this).find('div').css('display', 'none');
   }
 );

 

 

위와 같이 현재일시를 뒤에 붙여줘도 되고 Math.random() 함수를 써서 랜덤값을 붙여넣어줘도 됩니다.

 

그럼 마우스 오버시마다 gif의 초기 화면으로 play 됩니다.

 

jquery hover 는 첫번째 매개변수가 mouseover, 두번째 함수가 mouseout 입니다.