javascript - 在页面加载前完成加载条

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”事件

并确保你在 javascript 之上加载 css

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