Как заменить изображение на гиф файл?

Question

[Ch cgtj Hihf]

У меня есть изображение на странице , она размещена в теге img , вот то изображение:

И мне нужно при нажатии на него заменить изображение на гиф файл и запустить а после окончания гиф заменить обратно на изображение, вот гиф:

Comments

[Сергей Соколов]

Пока держится нажатие – хотите играть зацикленный GIF, или только раз его проиграть и остановиться на «сыре» ?

гиф-анимация плохо контролируется и измеряется. С такой анимацией лучше бы просто иметь изображение сыра и программно включать CSS-анимацию, меняя прозрачности персонажа и сыра.

[Ch cgtj Hihf]

Сергей Соколов, нужно раз , но нужно именно гиф , с ним проще будет.

[ProjectSoft]

Pin Bib, вы даже не понимаете, что проще. )))
Данный код отработает при клике на любую картинку на странице.
Можно переделать под себя

document.addEventListener("click",t=>{
	let el = t.target;
	if("img" === el.tagName.toLowerCase() && !el.classList.contains("animate")){
		let src = el.getAttribute("src");
		el.classList.add("animate"),
		el.setAttribute("src", "image_path_gif.gif"),
		setTimeout(()=>{
			el.setAttribute("src", src),
			el.classList.remove("animate")
		}, 3000)
	}
});

[Сергей Соколов]

Pin Bib, с GIF'ом не получится точного времени: в зависимости от устройства и его загруженности, то таймаут может раньше сработать и оборвать недоигранный певый цикл гифа. То наоборот запоздать, и после сыра успеет опять появииться персонаж и начать второй раз трансформироваться в сыр. В общем, GIF — это колхоз.

[Ch cgtj Hihf]

Сергей Соколов, ясно , а чем можно заменить гиф?

[Сергей Соколов]

Pin Bib, видео mp4, как вариант. Но для примера выше, где просто гаснет картинка А и проявляется картинка Б, это всё черезчур, повторю.

Answer 1

[Александр]

Блин сделай SVG с анимациями, там это проще.
Так то можно и гифами, через setTimeout менять обратно.

<img onclick="this.src='1.gif';setTimeout(function(x){x.src='1.png'},2000,this)" src="1.png"/>