JSFiddle - React, Tailwind, and code Playground

HTML

<div id="all">
<img src="http://p1.pichost.me/i/19/1422518.jpg" alt="Smiley face" height="420" width="420">
</div>


<div id="loading">LOADING</div>

CSS

#all{
	display: none;
}
#loading {
position:absolute;
 top: 45%;
 left: 50%;
 -webkit-transform: translate(-50%, -50%);
 transform: translate(-50%, -50%);
    z-index: 100;
    width: 100px;
    height: 100px;
}

JavaScript

function onReady(callback) {
  var intervalID = window.setInterval(checkReady, 1000);

  function checkReady() {
    if (document.getElementsByTagName('body')[0] !== undefined) {
      window.clearInterval(intervalID);
      callback.call(this);
    }
  }
}

function show(id, value) {
  var el = document.getElementById(id);
  if(value)
      fadeIn(el)
  else 
      fadeOut(el);
}

onReady(function() {
  show('all', true);
  show('loading', false);
});

function fadeIn(el, display) {
  el.style.opacity = 0;
  el.style.display = display || "block";

  (function fade() {
    var val = parseFloat(el.style.opacity);
    if (!((val += .01) > 1)) {
      el.style.opacity = val;
      requestAnimationFrame(fade);
    }
  })();
}

function fadeOut(el) {
  el.style.opacity = 1;

  (function fade() {
    if ((el.style.opacity -= .01) < 0) {
      el.style.display = "none";
    } else {
      requestAnimationFrame(fade);
    }
  })();
}