JSFiddle - React, Tailwind, and code Playground

HTML

<div id="glykopeels" class="preload" style="background: #ebebeb url('http://lamininbeauty.co.za/images/products/glykopeel.jpg') no-repeat top right;">Glykopeels Content</div>
<div id="facials" class="preload" style="background: #ebebeb url(http://lamininbeauty.co.za/images/products/facial.jpg) no-repeat top right;">Facials Content</div>

CSS

#glykopeels{
        background: #ebebeb url('http://lamininbeauty.co.za/images/products/loader.gif') no-repeat top right;
        background-size: contain;
    }
#facials{
    background: #ebebeb url('http://lamininbeauty.co.za/images/products/loader.gif') no-repeat top right;
    background-size: contain;
    }

JavaScript

// Replace background after loading image has loaded with real background images,
// Tested in IE6 !!!!! and firefox 12.
// Custom function written by GitaarLAB for 
// http://stackoverflow.com/questions/11915760/preloading-a-background-image-with-a-temporary-gif-image
// Version 2, changes: gracefull fallback!!!!

// base: dustin diaz version for browsers that don't support getElementsByClassName
// fixed by GitaarLAB
document.getElementsByClassName=document.getElementsByClassName||function(searchClass,node,tag) {
    var classElements = [], i=0, j=0;
    if (!node){node = document;}
    if (!tag){tag = '*';}
    var els = node.getElementsByTagName(tag);
    var elsLen = els.length;
    var pattern = new RegExp('(^|\\\\s)'+searchClass+'(\\\\s|$)');
    for (; i < elsLen; i++) {
        if ( pattern.test(els[i].className) ) {
            classElements[j] = els[i]; j++;}
    } return classElements;
};


var repBg=(function(n,u,p,a,i,r){ 
    window.onload=function(){repBg(1);};
    i=new Image(); i.onload=function(){this.onload=null; repBg(2);};
    document.write("<style>."+n+"{background:"+p+" url("+u+") "+a+
        " !important; background-size: contain !important;}"+
        "</style>"); 
    i.src=u; r=0;
    return function(t){ 
        r=r+t; if(r>2){ 
            var c=document.getElementsByClassName(n), i=0, l=c.length, s;
            repBg.exec=function(){ 
                document.getElementById(this['data-id']).className='';
            };
            for(;i<l;i++){
                r=new Image();
                r.onload=repBg.exec;
                r['data-id']=c[i].getAttribute('id');
                s=c[i].getAttribute('style');
                try { // sane browsers
                    //alert(  c[i].getAttribute('style').match(/url\('?([^'"]*)'?\)/i)[1]  );
                    r.src=s.match(/url\('?([^'"]*)'?\)/i)[1];
                } catch(e) { // <IE8
                    r.src=s.cssText.match(/url\('?([^'"]*)'?\)/i)[1];
                }
      ...