gif 처음부터 재생하는 방법

1. 문제상황

1) 버튼을 클릭하면 모달이 뜬다.
2) 모달 안에 gif가 있다.
3) 모달이 뜰 때마다 gif가 처음부터 재생되어야 하는데, 모달이 꺼졌다가 다시 뜨면 이전에 모달을 끈 시점부터 gif가 재생된다. gif가 처음이 아니라 중간부터 재생된다.
4) 모달이 뜰 때마다 gif가 처음부터 재생되도록 수정해야 했다.

2. 해결방법

모달이 뜰 때 src 속성을 빈 문자열로 설정하여 이미지 소스를 지운 후에, setTimeout을 사용하여 현재 실행 중인 코드가 끝나고 나서 이미지를 다시 로드했다.

모달이 뜨는 함수에 아래 코드를 작성했다.

var modal = document.getElementById('모달의 id');
var gif = modal.getElementsByTagName('img')[0]; // 코드에 맞게 수정해야 함
var src = gif.src;

gif.setAttribute('src', '');
setTimeout(function () {
  gif.setAttribute('src', src);
}, 0);