JSFiddle - React, Tailwind, and code Playground

HTML

<span id="loader"></span>
<div class="unresolved">    
    <img src="http://oris.tw/test/images/test.jpeg" alt="" />
    <img src="http://lorempixel.com/1600/1080/cats/1" alt="" />    
    <img src="http://lorempixel.com/1600/1080/cats/2" alt="" />
    <img src="http://lorempixel.com/1600/1080/cats/3" alt="" />
    <img src="http://lorempixel.com/1600/1080/cats/4" alt="" />
    <img src="http://lorempixel.com/1600/1080/cats/5" alt="" />
    <img src="http://lorempixel.com/1600/1080/cats/6" alt="" />
    <img src="http://lorempixel.com/1600/1080/cats/7" alt="" />
    <img src="http://lorempixel.com/1600/1080/cats/8" alt="" />
</div>

CSS

.unresolved {
    opacity: 0;
}
* {
transition: all 1s ease-out;
}
#loader::before {
    content:'Loading Content...'
}

JavaScript

$(document).ready(function() {
  $('img').css('width','100%');          
    var interval = setInterval(function(){         
        $('#loader').append('.');
        if(  window.loaded === true ) {
            clearInterval(interval);
        }
    }, 100);    
});
$(window).load(function() {
  $('#loader').remove();
   $('div').removeClass('unresolved');
});