JSFiddle - React, Tailwind, and code Playground

HTML

<img id="image1" src="https://habrastorage.org/files/0fb/8d2/4ad/0fb8d24ad70d41f591bc2385763e2d16.png"/>
<img id="image2" src="https://habrastorage.org/files/8ff/086/b3e/8ff086b3e19c4d50a888a552d2a61017.png"/>

CSS

body {
  background: dimgray;
  padding: 0;
  margin: 0;
}

JavaScript

var image1 = document.getElementById("image1");
var image2 = document.getElementById("image2");

var delay = 1000;
function onClick() {
  delay = (delay > 0 ? 0 : 1000);
}

image1.onmousedown = onClick;
image2.onmousedown = onClick;

function draw() {
	image1.style.display = toggle ? 'none' : '';
	image2.style.display = toggle ? '' : 'none';
  toggle = !toggle;
}
draw();

var toggle = false;
var lastFrameTime = 0;
function animate() {
  var timeSinceLast = performance.now() - lastFrameTime;
  if (timeSinceLast > delay) {
    lastFrameTime = performance.now();
    draw();
  }
  requestAnimationFrame(animate);
}
requestAnimationFrame(animate);