JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://nettuts.s3.amazonaws.com/860_preloaderPlugin/css/preloader.css">
<script src="https://github.com/JessThrysoee/jquery.imgloaded/raw/master/ahpi.imgload.js"></script>
<div id="container">
    <h2>Preloader - Load images with style</h2>
      
    <ul id="gallery" class="clearfix">
        <li><p><a href="#"><img src="http://nettuts.s3.amazonaws.com/860_preloaderPlugin/images/1.jpg" /></a></p></li>
        <li><p><a href="#"><img src="http://nettuts.s3.amazonaws.com/860_preloaderPlugin/images/2.jpg" /></a></p> </li>
        <li><p><a href="#"><img src="http://nettuts.s3.amazonaws.com/860_preloaderPlugin/images/3.jpg" /></a></p> </li>
        <li><p><a href="#"><img src="http://nettuts.s3.amazonaws.com/860_preloaderPlugin/images/4.jpg" /></a></p></li>
        <li><p><a href="#"><img src="http://nettuts.s3.amazonaws.com/860_preloaderPlugin/images/5.jpg" /></a></p> </li>
        <li><p><a href="#"><img src="http://nettuts.s3.amazonaws.com/860_preloaderPlugin/images/6.jpg" /></a></p> </li>
        <li><p><a href="#"><img src="http://nettuts.s3.amazonaws.com/860_preloaderPlugin/images/7.jpg" /></a></p> </li>
        <li><p><a href="#"><img src="http://nettuts.s3.amazonaws.com/860_preloaderPlugin/images/8.jpg" /></a></p> </li>
        <li><p><a href="#"><img src="http://nettuts.s3.amazonaws.com/860_preloaderPlugin/images/9.jpg" /></a></p> </li>
    </ul>

</div>

CSS

#gallery a {
    width: 315px;
     height: 210px;
     background: #FFF;   
}
#gallery a.preload { background:url('http://nettuts.s3.amazonaws.com/860_preloaderPlugin/css/i/89.gif') center center no-repeat #ffffff;  }

JavaScript

$.fn.prettyloader = function(options){    
       
    // Default options
    var defaults = {
        delay:200,
        preload_parent:"a",
        ondone:function(){ },
        oneachload:function(image){  },
        fadeSpeed:500,
        preloadClass: 'preload'
    },
        
    // Extend our default options with the options the user passes in
    opts = $.extend(defaults, options),
        
    // Cache & hide the images passed to our plugin
    images = $(this).css({"visibility":"hidden",opacity:0}),
        
    // Prepend our icon to the body to make it load fast
    icon = $("<img />",{
        
            id : 'loadingicon',
            src : opts.icon
        
        })
        .hide()
        .prependTo("body"),
    
    // Create a new array to store the number completed
    completed = new Array(images.length),
    
    // How long until the image should run
    delaySum = 0,
    
    // The function that will run our nice animation effect!
    runAnimation = function(image) {
        
        var $image = $(image);
        
        $image
            .css("visibility","visible")       
            .animate({opacity:1}, opts.fadeSpeed, function() {
                $image.parent()
                    .removeClass('preload');
            });        
     
        
    };
    
    // Style the Parent
    images
        .parent()
            .addClass(opts.preloadClass);

    // But here's where my plugin really get's different than the NetTuts version! 
    // Instead of waiting on running a checkInterVal
    // of our images, we can simply rely on the load events!  
    images.each(function() {
        var $this = $(this);
        $this
            .load(function() {                
                $this
                    .css("visibility","visible")       
                    .delay(delaySum)
                    .animate({opacity:1}, opts.fadeSpeed, function() {
                        $this.parent()
                       ...