JSFiddle - React, Tailwind, and code Playground

HTML

<script>
	//Essa função deve ser carregada antes das imagens serem carregadas
  function ocultarAmpulheta(imgCarregada) {
    document.getElementById("ampulheta").style.display = "none";
		imgCarregada.style.display = "block";
  }
  function carregarImagem() {
    var img = document.getElementById("imagem");
    img.setAttribute("src", img.getAttribute("data-src"));
	}
</script>

<!-- o botão simula o Scroll da página que chama o carregamento da imagem -->
<input type="button" value="carregar" onclick="carregarImagem()">

<div id="img-box">
   <img id="ampulheta" src="https://mir-s3-cdn-cf.behance.net/project_modules/disp/ab79a231234507.564a1d23814ef.gif" width="100px"
   height="100px"/>
   <img id="imagem" onload="ocultarAmpulheta(this)" src width="300px"
   height="200px" style="display: none;" data-src="http://yodobi.com/4k-Wallpapers/4k-wallpapers-Is-4K-Wallpaper.jpg"/>
</div>

CSS

#img-box {
   width: 300px;
   height: 300px;
   background: black;
   padding: 15px;
   color: white;
   display: flex;
   align-items: center;
   justify-content: center;
}