JSFiddle - React, Tailwind, and code Playground

by Cone

HTML

<div id="wrap">
<span class="some">1</span>
<span class="some">2</span>
<span class="some">3</span>
<span class="some">4</span>
<span class="some2">5</span>
<span class="some3">6</span>
<span class="some4">7</span>
<span class="some5">8</span>

</div>

CSS

* {
     padding:0;
     margin:0;
 }
 body {
     font-size:13px;
     position:relative;
     min-height:800px;
     min-width:100%;
 }
 .some {
     background:url(http://round.sebastopol.ua/Round_files/nasha_programma/nasha_programma.2.jpg);
 }
 .some2 {
     background:url("http://desktopnexus.co/photos/Fitness%20Girls/Beautiful_Fitness_Girl_037.jpg");
 }
 .some3 {
     background:url(http://mixelement.com/wp-content/gallery/fitness-girl-gallery-hd-3/fitness_girls_265.jpg);
 }
 .some4 {
     background:url(http://media.tratamientosbelleza.com.ar/wp-content/uploads/2012/01/fitness1.jpg);
 }
 .some5 {
     background:url(http://desktopnexus.co/photos/Fitness%20Girls/Beautiful_Fitness_Girl_002.jpg);
 }
 .hideass {
     opacity:0.6;
 }
 .hideass img {
     width:80px;
     height:100px;
 }
 #layero {
     position:absolute;
     opacity:0.6;
     z-index:100;
     width:100%;
     background:#000;
     height:100%;
 }
 #layer_prog_hold {
     width:200px;
     padding:5px;
     position:fixed;
     left:50%;
     top:50%;
     margin:-15px 0 0 -100px;
     height:30px;
     z-index:102;
     background:#eee;
     border:1px solid #ccc;
     box-shadow:0 0 10px #ccc;
 }
 #layer_prog_hold div {
     line-height:30px;
     text-align:center;
     font-weight:bold;
     color:#666;
     font-family:Calibri;
     height:30px;
     background:#fff url('http://s10.postimg.org/5tcjnqyad/load_new.gif');
     width:100%;
 }

JavaScript

var bg = $("body *");
var bImg = [];

addHelpers();

function addHelpers() {
    if($('body').prepend("<div id='layero'></div>").prepend("<div id='layer_prog_hold'><div>0%</div></div>")){   
     getImages(bg);
    }
}

// code abode works correctly

function getImages(param) {
    param.each(function () {
        var imgIt = $(this).css('background-image'); //get bg of the tag
        //unique bgs to the array
        if (imgIt !== "none") {
            imgIt = imgIt.replace(/"/g, "").replace(/url\(|\)$/ig, "");
            if (bImg[bImg.length - 1] !== imgIt) {
                bImg.push(imgIt);
            }
        }

        //once loop through array fifnihed add elements to the boddy
        if (!--bg.length) {
            $('#wrap').append("<div class='hideass'></div>");
            for (var i in bImg) {
                $(".hideass").append('<img alt="' + bImg[i] + '">');
                if(i == bImg.length-1) {
                progOnLoad();
                }   
            }
        }
    });
}

function progOnLoad() {
    var layer = $("#layero");
    var progD = $("#layer_prog_hold");
    var progDl = $("#layer_prog_hold div");
    var imgT = $('#wrap img');
    var bodImg = imgT.length;
    var chop = 100 / bodImg;
    var iVal = 1;
    imgT.each(function () {
        var acI = $(this).attr('alt');
        console.log(acI);
        $(this).attr('src',acI).removeAttr('alt');
        $(this).load(function () {
            progDl.text(Math.round(chop * iVal) + "%");
            iVal++;
            if (iVal === imgT.length) {
                setTimeout(function () {
                    progD.fadeOut('slow', function () {
                        layer.fadeOut('normal');
                    });
                }, 2000);
            }
        });
    });
}