JSFiddle - React, Tailwind, and code Playground

by Виталий Инчин

HTML

<div id="block">
    <img class="im main" src="http://www.sunhome.ru/UsersGallery/Cards/prazdnik_den_zemli_kartinka.jpg">
        <img class="im gif" src="http://demiart.ru/forum/uploads/post-33144-1188373587.gif";
</div>

CSS

.im, #block{
    width: 200px;
    height: 200px;
}

#block{
  position: relative;
  margin: 0px auto;
}

*{
      transition: opacity 0.5s;
}

.gif{
    z-index: 1;
    position: absolute;
    left: 0px;
    display: none;
    top: 0px;
}

JavaScript

//Послать ajax с jsfiddle нет возможности, так что представим, что apple - результат запроса.

var apple = '<div id="item-wrapper"><figure><b class="loading"></b><img class="im main" src="http://st.gde-fon.com/wallpapers_preview/311375_zakat_priroda_derevya_10720x7120_%28www.gdefon.ru%29.jpg"></figure></div>';

setTimeout(function(){
$(".gif").show().css("opacity", 1);;
var img = $(apple).find("img").css("opacity", 0);

img.on("load", function(){
  $(".gif").css("opacity", 0);
  setTimeout($(".gif").hide, 500);
  $(this).css("opacity", 1);
});

$("#block .main").replaceWith(img); 
    
}, 2000);