JSFiddle - React, Tailwind, and code Playground

HTML

<span id="checkboxID">test</span>
<div id="container">
    <img id="myimage" src="http://www.hybrideb.com/content/evidence/doubletree.png" />
    <img class="loader" src="http://www.speldhurstcc.org.uk/images/ajax-loader.gif" />
</div>

CSS

#container .loader{
    position:absolute;
    left:50px;
    top:50px;
    z-index:999;
    display:none;
}
#container{
    position:relative;
}
.loading{
 opacity:.5;
}

JavaScript

$('#checkboxID').click(function(){
  var newImg = new Image;
  newImg.onload = function(){
      
      $('#myimage').attr('src',this.src).removeClass('loading');
      $('#container .loader').hide();
       }
  $('#container .loader').show();
  $('#myimage').addClass('loading');
  newImg.src = 'http://www.hybrideb.com/content/evidence/wtc-north-roof-full-small.jpg';
});