title: detect if 'DOMContent already in browser cache
body: <p>Hi I am trying to display a loader section.
  Which section will increase 0 to 100% during page load.
  for that I tried below code.
  Problem is that when I tried to page soft reload with browser cache that screen is not moving from bottom to top (with height 0% to 100%).</p>
  
  <p>But in hard refresh after removing browser cache it's ok. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>;(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) &lt;&lt; 0) +"%";
        var percvh = ((100/tot*c) &lt;&lt; 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&lt;tot; i++) {
        var tImg     = new Image();
        tImg.onload  = imgLoaded;
        tImg.onerror = imgLoaded;
        tImg.src     = img[i].src;
      }    
    }
    document.addEventListener('DOMContentLoaded', loadbar, false);
  }());</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>*{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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
  
    
  
        &lt;div id="overlay"&gt;
          &lt;div id="progstat"&gt;&lt;/div&gt;
          &lt;div id="progress"&gt;&lt;/div&gt;
        &lt;/div&gt;
  
        &lt;div id="container"&gt;
          &lt;img src="http://placehold.it/3000x3000/cf5"&gt;
          &lt;img src="http://placehold.it/3000x3000/f0f"&gt;
          &lt;img src="http://placehold.it/3000x3000/fb1"&gt;
          &lt;img src="http://placehold.it/3000x3000/ada"&gt;
          &lt;img src="http://placehold.it/3000x3000/045"&gt;
          &lt;img src="http://placehold.it/3000x3000/b00"&gt;
          &lt;img src="http://placehold.it/3000x3000/41b"&gt;
          &lt;img src="http://placehold.it/3000x3000/098"&gt;
          &lt;img src="http://placehold.it/3000x3000/987"&gt;
          &lt;img src="http://placehold.it/3000x3000/f25"&gt;
          &lt;img src="http://placehold.it/3000x3000/526"&gt;
          &lt;img src="http://placehold.it/3000x3000/826"&gt;
          &lt;img src="http://placehold.it/3000x3000/ad6"&gt;
          &lt;img src="http://placehold.it/3000x3000/74c"&gt;
          &lt;img src="http://placehold.it/3000x3000/b40"&gt;
          &lt;img src="http://placehold.it/3000x3000/cc7"&gt;
          &lt;img src="http://placehold.it/3000x3000/112"&gt;
          &lt;img src="http://placehold.it/3000x3000/113"&gt;
        &lt;/div&gt;
    
    
   
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://jsfiddle.net/lemonkazi/mdzL9w6u/" rel="nofollow noreferrer">JSFIDDLE LINK</a>
  following to implement like this
  <a href="https://fillinglife.co/" rel="nofollow noreferrer">https://fillinglife.co/</a></p>