определить, находится ли DOMContent в кэше браузера - PullRequest
Новая
       45

определить, находится ли DOMContent в кэше браузера

0 голосов
/ 27 июня 2019

Привет, я пытаюсь отобразить раздел загрузчика. Какой раздел увеличится от 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/

...