Загрузка панели завершена до загрузки страницы

Question

Я использую экран загрузки, чтобы покрыть мой сайт (http://advancedriderwear.com/index.html), хотя он загружается, и это здорово, за исключением того, что он достигает 100% до загрузки моего посадочного экрана, и поэтому пользователь по-прежнему видит загрузку изображений, котораяЭто не хорошо! ». Вот код, который я использую:

;
(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);
}());

Это правильный метод или есть альтернатива, чтобы страница полностью загружалась перед отображением основного сайта.

Экран загрузки оформлен с использованием:

.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;
} 

Answer 1

используйте функцию window.load вместо событий load или DOMContentLoaded

и убедитесь, что вы загружаете CSS выше 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;
}