JSFiddle - React, Tailwind, and code Playground

HTML

<img id="image1" src="https://habrastorage.org/files/816/f1e/288/816f1e288a734a4b963e59e677850cd3.png"/>
<img id="image2" src="https://habrastorage.org/files/d1d/4b0/16d/d1d4b016d7634bce87cc03e86cc4408a.png"/>

CSS

body {
  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);