Uncaught TypeError: Cannot read property 'overlay' of undefined

loadgo.min.js:14 Uncaught TypeError: Cannot read property 'overlay' of undefined

<div id="loading">
        <div class="l-container">
            <div class="content">
                <img id="logo" src=""logo.png" alt="Logo" class="img-responsive">
            </div>
        </div>
    </div>

#loading {
    position: fixed;
    z-index: 1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100vw;
    height: 100vh;
    background-color: white;
    display: table;
    .l-container {
        text-align: center;
        display: table-cell;
        vertical-align: middle;
        .content {
            position: relative;
            width: 25%;
            text-align: center;
            display: inline-block;
        }
    }
}

$('#logo').loadgo('setprogress', Pace.start());

am trying to do something like ur YT demo but for normal app “not WP” but as ur examples lack suck a thing and ur demo doesnt Explains exactly how so…

[ctf0]

many thanx for ur help, will give that a try.

[franverona]

Wow, that’s right. Maybe that sentence should be rewriten. My bad, sorry.

I will add a new section soon to explain how to use LoadGo with something like Pace in order to achieve a website loading progress.

Let me explain how should be done (the way I know).

1. Our first scripts to be loaded should be LoadGo (non jQuery version so we don’t need jQuery as well) and Pace. In this specific order because we want to load both as soon as possible so we can start our progress logic.
2. Then we can execute some Pace functions to start fetching the progress.
3. In every Pace internal update of the progress, we are going to execute LoadGo setprogress function, so our logo will be updated with current progress.
4. When progress is 100%, we can remove our logo overlay because the whole page should be loaded.

In my WP plugin, the first JS code to be executed was this (cleaned for this explanation):

<script type="text/javascript">
    var LOADGO_LOGO = document.getElementById('loadgo-logo');
    document.getElementsByTagName('body')[0].style.overflow = 'hidden';
    LOADGO_LOGO.onload = function () {
      var interval = window.setInterval(function () {
        if (typeof Loadgo !== 'undefined') {
          LOADGO_LOGO.style.display = 'block';
          var overlayDOM = document.getElementById('loadgo-internal');
          var perc = 100,, 
              width = LOADGO_LOGO.width * (perc / 100), 
             height = LOADGO_LOGO.height * (perc / 100);
          overlayDOM.style.width = width + 'px';
          overlayDOM.style.height = height + 'px';
          var loadgoParams = {
            animated:     false
          };
          Loadgo.init(LOADGO_LOGO, loadgoParams);
          window.clearInterval(interval);
        }
      }, 100);
    };
  </script>

Then I had to modify Pace script by including code to update LoadGo with setprogress (line 226 and 903).

Finally, we need some HTML code:

<div id="loadgo-logo-overlay">
    <div id="loadgo-internal">
      <img id="loadgo-logo" src="logo.png" alt="logo" style="display:none;" />
    </div>
  </div>

And CSS (this link).

You can use this Pace modified logo, and with my explanations you should be able to use both libraries.

I hope it helps you.

-Fran