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

页面加载之前完成加载栏

1 个答案: