2

Running into a problem with creating a loading screen. The idea is to have a black block everywhere until all queries/assets are loaded. Apparently windows.onload in the tool for this so here's my current, non-working, setup. All the files were somewhat generated through jekyll but I'm pasting the end result as displayed by my browser.

html source:

<!DOCTYPE html>
<html lang="en">

<head>
    <title></title>
    <meta name="description" content="">  
    <link rel="icon" type="img/ico" href="assets/img/myico.ico">
    <script src="/assets/scripts/KrLoader.js" defer></script><script src="/assets/scripts/KrSearchEngine.js" defer></script>
    <link rel="stylesheet" type="text/css" href="/css/feed.css">
</head>

<body class="DefaultBody">
  <header class="Header">

  <nav class="main-menu">
    <a class="home-button" href="/feed">Home</a>
    <nav class="sub-menu">
      <a class="item" href="/">about</a>
    </nav>
  </nav>
</header>
  <main class="DefaultMain">
    <div class="DefaultContent">
    <div class = "Feed">
       <img class=BackgroundImage src='../assets/img/forest.jpg'></img>
       <div class=TopBanner></div>
       <ul class="ArticleFeed"></ul>
        </div>
    </div>
    <nav class="DefaultLeft"></nav>
    <aside class="DefaultRight"></aside>
  </main>
  <footer class="Footer">

  </footer>

</body>
</html>

Going into KrLoader which is the script designed to work with this:

var assetsLoaded = false;

document.addEventListener('loaded', function (e) {
    if(assetsLoaded == true){
        var elem = document.getElementById('loadingScreen');
        if(elem){
            elem.parentNode.removeChild(elem); 
        }

    }
}, false);


window.onload = function() {
    assetsLoaded = true;
    var event = new Event('loaded');
    document.dispatchEvent(event);
};

function Loading() {

    loading = document.createElement('div');
    loading.id = "loadingScreen";

    var styles = `
    #loadingScreen {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        z-index: 2;
        background-color: rgba(0,0,0,0.8);
    }`
    var styleSheet = document.createElement("style");
    styleSheet.type = "text/css";
    styleSheet.innerText = styles;
    document.head.appendChild(styleSheet);
    document.body.appendChild(loading);
}


Loading();

Now this isn't working as intended as windows.onload fires way before ../assets/img/forest.jpg gets loaded.

What I've tried:

  • putting the loading function as direct style in the html instead
  • putting the url in the css
  • removing defer
  • putting the scripts at the end of the page

I know I can directly try to see if the image loaded but I needed a more generic way to approach this as there will be eventually other resources which I will need to wait for. The ideal solution would be that I could pin KrLoader.js to any page I would have and it would handle everything.

David Jacquel
  • 51,670
  • 6
  • 121
  • 147
Kronephon
  • 325
  • 3
  • 12
  • I'm not sure why it doesn't work as the specification states that it should only fire after Images are loaded. But something different: I'd recommend putting the loading styles inline into the html (or at least into a stylesheet, but they should really be in the html) as putting them in a deferred script defeats the purpose of a loading screen. – Moritz Mahringer Dec 12 '19 at 16:05
  • Yeah I had that initially, will probably revert to it. This has just been the latest of several iterations trying to get it to work. – Kronephon Dec 12 '19 at 18:27
  • have a look here https://stackoverflow.com/questions/11071314/javascript-execute-after-all-images-have-loaded – Dimitrios Matanis Dec 13 '19 at 07:47

0 Answers0