JSFiddle - React, Tailwind, and code Playground

by Cone

HTML

<div class="loader">
    <div class="nloader">0%</div>
</div>
<div class="nowa1"></div>
<div class="nowa2"></div>
<div class="nowa3"></div>
<div class="nowa4"></div>
<div class="nowa5"></div>
<div class="nowa6"></div>
<div class="nowa7"></div>
<div class="nowa8"></div>
<div class="tempDiv"></div>

CSS

* {
    margin:0;
    padding:0;
}
body {
    font-size:62.5%;
    font-family:Tahoma;
}
.nowa1 {
    background:url(http://www.experiencetravelgroup.com/blog/wp-content/uploads/2012/04/tea-tasting.jpg);
}
.nowa3 {
    background:url(http://www.wallpage.ru/imgbig/wallpapers_49897.jpg);
}
.nowa4 {
    background:url(http://decorhome.com.ua/images/stories/asa/84.jpg);
}
.nowa5 {
    background:url(http://www.vashsad.ua/i/gallery/wallpapers/81/1600_1200/NQEbk0Oi.jpg);
}
.nowa6 {
    background:url(http://img0.liveinternet.ru/images/attach/c/2/82/969/82969032_259775.jpg);
}
.nowa7 {
    background:url(http://manboobz.files.wordpress.com/2012/12/teapot-graphics.jpg);
}
.nowa8 {
    background:url(http://mamainheels.com/wp-content/uploads/2013/03/TeaTime_10.jpg);
}
.loader {
    z-index:5;
    width:100px;
    height:100px;
    top:50px;
    left:50%;
    margin-left:-51px;
    position:absolute;
    font-size:150%;
    text-align:center;
    line-height:100px;
    background:url('http://s20.postimg.org/aak900wp5/loader.gif') center center no-repeat;
}
.vloader {
    float:left;
    width:0%;
    height:100%;
    position:relative;
    background:#dfdfdf;
}
.nloader {
    height:100%;
    width:100%;
    position:absolute;
    color:#666;
}
.tempDiv img {
    width:120px;
    height:80px float:left;
}

JavaScript

var divS = $('div', document);
var tempCont = $('div.tempDiv');
var loader = $('div.loader');
var vloader = $('div.vloader');
var nloader = $('div.nloader');
var imagesArray = new Array();

ArrayImg(LoadImg);

// ArrayImg(LoadImg);

function ArrayImg(callback) {
    divS.each(function () {
        var bgNext = $(this).css('background-image');
        if (bgNext !== "none") {
            bgNext = bgNext.replace(/"/g, "").replace(/url\(|\)$/ig, "");
            imagesArray.push(bgNext);
            $.unique(imagesArray);
        }
        if (!--divS.length) {
            for (var i = 0; i < imagesArray.length; i++) {
                tempCont.append('<img src="' + imagesArray[i] + '">');
            }
            if (i === imagesArray.length) callback(1);
        }
    });
}

function LoadImg(i) {
    var imgCont = $('img', tempCont);
    var allImgs = $('img', tempCont).length;
    var chunk = 100 / allImgs;
    imgCont.bind('load', function () {
        nloader.html(Math.round(i * chunk) + "%");
        i++;
        LoadImg(i);
    });
}

console.log(LoadImg);