JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    
    <img id="image" src="">
    <span id="ajaxloader" ><img  src="http://2.bp.blogspot.com/-wXBUSo7dvfw/T83u8u1bCOI/AAAAAAAACQ4/h6eRMadjA6Q/s1600/frog-vector-eps-thumb8448476.jpg"></span>
    
</div>
        <div id="next">Next</div>

CSS

#container{
    width:400px;
    height:400px;
    position:relative;
}
#ajaxloader{
    position:absolute;
    top:0px;
    left:0px;
    display:none;
}
#next{
    cursor:pointer;
    display:inline-block;
    background:blue;
    color:white;
    border-radius:3px;
    padding:5px;
}

JavaScript

var img = new Array();
img[0]='http://2.bp.blogspot.com/-wXBUSo7dvfw/T83u8u1bCOI/AAAAAAAACQ4/h6eRMadjA6Q/s1600/frog-vector-eps-thumb8448476.jpg';
img[1]='http://cdn0.cosmosmagazine.com/wp-content/uploads/New%20Species%20flying%20frog%20Rhacophorus%20helenae%20%C2%A9%20Jodi%20Rowley,%20Australian%20Museum%20COSMOS%20Science%20Magazine.jpg'; 
img[2]='http://us.123rf.com/400wm/400/400/puruan/puruan1010/puruan101000001/7866634-confused-frog.jpg';
img[3]='http://4.bp.blogspot.com/-PkIHnDogZfE/TZNoBgWqcLI/AAAAAAAAAAo/zF2ejadFTMo/s1600/art_frog.jpg';

count=0;

$(function(){

    
    $('#next').click(function(){
        
         $('#ajaxloader').show(); 
         $('#image').attr('src', img[count]+'?v=dummy').load(function() {
              $('#ajaxloader').fadeOut(); 
        
          });     
        if(count<img.length-1){count++;}else{count=0;}
    });  
    
    
    
    
    
});