Percentage Preloading
<!-- Percentage Preload
** flyfishingit.com / front-page / Preload
**
** @webbeloz
**
-->
<div class="flyfishingit-com">
  <a target="_blank" href="http://flyfishing.webbeloz.it"><h1>T.L.W. FlyFishing</h1>
  </a>
  <p>Flry Rods – Bamboo Split the Cane – The Best of Dry Flies Gallery</p>
</div>
html, body {
  height: 100%;
  margin: 0;
}
.flyfishingit-com{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}
a {
  color: lightblue;
  font: normal 2.5rem sans-serif;
  text-decoration: none;
}
a:hover {
  color: white;
}
p {
  font: normal 1.65rem sans-serif;
  color: white;
}

(function() {
  
  var show = document.getElementsByClassName("home")[0];
  var name = document.querySelector("body" , ":before");

  var iDiv = document.createElement('div');
  iDiv.className = 'loading';
  iDiv.style.position = "absolute";
  iDiv.style.zIndex = "9999";
  iDiv.style.top = "0";
  iDiv.style.left = "0";
  iDiv.style.height = "100%";
  iDiv.style.width = "100%";
  iDiv.style.background = "#fafafa";
  document.getElementsByTagName('body')[0].appendChild(iDiv);

Image.prototype.load = function(url) {
	var img = this;
    var request = new XMLHttpRequest();
    request.open('GET', url, true);
    request.responseType = 'arraybuffer';
    request.onload = function(e) {
    var blob = new Blob([this.response]);
    img.src = window.URL.createObjectURL(blob);
};
  
request.onprogress = function(e) {
  
  parseInt(img.completedPercentage = Math.floor((e.loaded / e.total) * 100));
  iDiv.innerHTML = '<p style="position:relative;top:50%;text-align:center;color:#7e7e7e;font:normal 12px sans-serif;">' + (img.completedPercentage + ' %') + '</p>';
  
  if ( img.completedPercentage < 100 ) {
        //console.log('init...');
      } else if ( img.completedPercentage == 100 ) {
        //console.log('End!');
        name.style.backgroundImage = "url('http://webbeloz.it/assets/fly-fishing-it.jpg')";
        name.style.backgroundRepeat = "no-repeat";
        name.style.backgroundSize = "100% 100%";

        $('div.loading').hide(); //.fadeOut(400);
        //HH.fadeIn();
        //$('div.loading').animate({ height: 0 });
      }

    };
    request.onloadstart = function() {
      img.completedPercentage = 0;
    };
    request.onloadend = function() {
        //remove
        //$('div.loading').fadeOut('fast');
        img.completedPercentage = 100;
    }
    request.send();
  };
  
Image.prototype.completedPercentage = 0;
  
  var img = new Image();
  img.load("http://webbeloz.it/assets/fly-fishing-it.jpg", "http://webbeloz.it/assets/playlist-vinyl.jpg");

})();