Load bar finishing before page is loaded

Question

I'm using a loading screen to cover my site (http://advancedriderwear.com/index.html) whilst it loads which is great, except it reaches 100% before my landing screen is loaded, and therefore the user still see's images loading, which isnt good!. ' Here's the code I'm using:

;
(function() {
  function id(v) {
    return document.getElementById(v);
  }

  function loadbar() {
    var ovrl = id("overlayLoad"),
    prog = id("progress"),
    stat = id("progstat"),
    img = document.images,
    c = 0,
    tot = img.length;
    if (tot == 0) return doneLoading();

    function imgLoaded() {
      c += 1;
      var perc = ((100 / tot * c) << 0) + "%";
      prog.style.width = perc;
      stat.innerHTML = "Loading " + perc;
      if (c === tot) return doneLoading();
    }

    function doneLoading() {
      ovrl.style.opacity = 0;
      setTimeout(function() {
        ovrl.style.display = "none";
      }, 5000);
    }
    for (var i = 0; i < tot; i++) {
      var tImg = new Image();
      tImg.onload = imgLoaded;
      tImg.onerror = imgLoaded;
      tImg.src = img[i].src;
    }
  }
  document.addEventListener('DOMContentLoaded', loadbar, false);
}());

Is this a correct method or is there an alternative to ensure the page is fully loaded before the main site is displayed.

The Loading screen is styled using:

.LoaderIcon{
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 5%;

}
#overlayLoad{
  position:fixed;
  z-index:99999;
  top:0;
  left:0;
  bottom:0;
  right:0;
  background:rgba(0,0,0,1);
  transition: 1s 0.4s;
  display: block;
}
#progress{
  height:2px;
  background:#fff;
  position:absolute;
  width:0;                
  top:50%;
  font-family: Magistral;
  font-size: 1.5em;
}
#progstat{
  letter-spacing: 3px;
  position:absolute;
  top:50%;
  margin-top:-40px;
  width:100%;
  text-align:center;
  color:#fff;
  font-family: 'UniversLTW01-59UltCondensed';
  font-size: 1.5em;
}

use 'load' instead of 'DOMContentLoaded'. check this https://stackoverflow.com/questions/2414750/difference-between-domcontentloaded-and-load-events — charan kumar, Oct 24 '18 at 10:35
@charan kumar, thanks, but this then stops the actual load bar showing so I only see #overlayLoad and .LoaderIcon, and doesn't change #overlayLoad to 'display:none' one the page is loaded? — Marcus Williams, Oct 24 '18 at 10:50
no need to setTimeout for doneLoading(), do you mean after 5000ms also it is not changing to display: block from display: none? — charan kumar, Oct 24 '18 at 11:15
The loading screen should change to display:none once the page is loaded, when 'I change DOMContentLoaded' to 'load' it doesn't remove the loading screen at all. I cahnged that section to: function doneLoading() { ovrl.style.opacity = 0; ovrl.style.display = "none"; } But still no change — Marcus Williams, Oct 24 '18 at 11:28

charan kumar · Answer 1 · 2018-10-24T11:32:36.920

use window.load function instead of 'load' or 'DOMContentLoaded' events

and make sure you are loading css above the javascript

(function() {
      function id(v) {
        return document.getElementById(v);
      }
    
      function loadbar() {
        var ovrl = id("overlayLoad"),
        prog = id("progress"),
        stat = id("progstat"),
        img = document.images,
        c = 0,
        tot = img.length;
        if (tot == 0) return doneLoading();
    
        function imgLoaded() {
          c += 1;
          var perc = ((100 / tot * c) << 0) + "%";
          prog.style.width = perc;
          stat.innerHTML = "Loading " + perc;
          if (c === tot) return doneLoading();
        }
    
        function doneLoading() {
          ovrl.style.opacity = 0;
          setTimeout(function() {
            ovrl.style.display = "none";
          }, 5000);
        }
        for (var i = 0; i < tot; i++) {
          var tImg = new Image();
          tImg.onload = imgLoaded;
          tImg.onerror = imgLoaded;
          tImg.src = img[i].src;
        }
      }
      window.onload = loadbar()
    }());

.LoaderIcon{
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 5%;

}
#overlayLoad{
  position:fixed;
  z-index:99999;
  top:0;
  left:0;
  bottom:0;
  right:0;
  background:rgba(0,0,0,1);
  transition: 1s 0.4s;
  display: block;
}
#progress{
  height:2px;
  background:#fff;
  position:absolute;
  width:0;                
  top:50%;
  font-family: Magistral;
  font-size: 1.5em;
}
#progstat{
  letter-spacing: 3px;
  position:absolute;
  top:50%;
  margin-top:-40px;
  width:100%;
  text-align:center;
  color:#fff;
  font-family: 'UniversLTW01-59UltCondensed';
  font-size: 1.5em;
}

This is resulting with the same issue, it gets too 100% and closes before the page is ready, could it be due to my network being slow? or something outside of this function? — Marcus Williams, Oct 24 '18 at 12:34

Load bar finishing before page is loaded

1 Answers1