0

您好我正在尝试显示加载程序部分。在页面加载期间哪个部分将增加 0 到 100%。为此，我尝试了下面的代码。问题是当我尝试使用浏览器缓存进行页面软重新加载时，屏幕没有从底部移动到顶部（高度为 0% 到 100%）。

但是在删除浏览器缓存后进行硬刷新就可以了。

;(function(){
  function id(v){return document.getElementById(v); }
  function loadbar() {
    var ovrl = id("overlay"),
        prog = id("progress"),
        stat = id("progstat"),
        container = id("container"),
        img = document.images,
        c = 0;
        tot = img.length;
        var decrease = 100;

    function imgLoaded(){
      c += 1;
      var perc = ((100/tot*c) << 0) +"%";
      var percvh = ((100/tot*c) << 0) +"vh";
      ovrl.style.height = percvh;
      decrease = decrease - perc;
      prog.style.width = perc;
      stat.innerHTML = "Loading "+ perc;
      if(c===tot) return doneLoading();
    }
    function doneLoading(){
      setTimeout(function(){ 
       ovrl.style.height = '100vh';
        ovrl.style.transform= "translate3d(0, -100%, 0)";
         //ovrl.style.transition = "transform 2s ease-in-out";
      }, 1200);
    }
    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);
}());
*{margin:0;}

body{
  font: 200 16px/1 Helvetica, Arial, sans-serif;
}

img{width:32.2%;}

#overlay{
    background: #ccc;
    position: fixed;
    z-index: 999;
        bottom: 0;
    width: 100%;
    height: 0vh;
    transition: transform 1.5s ease-in-out;
}

#progress{
  height:1px;
  background:#fff;
  position:absolute;
  width:0;
  top:50%;
}
#progstat{
  font-size:0.7em;
  letter-spacing: 3px;
  position:absolute;
  top:50%;
  margin-top:-40px;
  width:100%;
  text-align:center;
  color:#fff;
}
<body>

  

      <div id="overlay">
        <div id="progstat"></div>
        <div id="progress"></div>
      </div>

      <div id="container">
        <img src="http://placehold.it/3000x3000/cf5">
        <img src="http://placehold.it/3000x3000/f0f">
        <img src="http://placehold.it/3000x3000/fb1">
        <img src="http://placehold.it/3000x3000/ada">
        <img src="http://placehold.it/3000x3000/045">
        <img src="http://placehold.it/3000x3000/b00">
        <img src="http://placehold.it/3000x3000/41b">
        <img src="http://placehold.it/3000x3000/098">
        <img src="http://placehold.it/3000x3000/987">
        <img src="http://placehold.it/3000x3000/f25">
        <img src="http://placehold.it/3000x3000/526">
        <img src="http://placehold.it/3000x3000/826">
        <img src="http://placehold.it/3000x3000/ad6">
        <img src="http://placehold.it/3000x3000/74c">
        <img src="http://placehold.it/3000x3000/b40">
        <img src="http://placehold.it/3000x3000/cc7">
        <img src="http://placehold.it/3000x3000/112">
        <img src="http://placehold.it/3000x3000/113">
      </div>
  
  
 
</body>

JSFIDDLE LINK 如下实现这样 https://fillinglife.co/

4

0 回答 0