Search code examples
javascriptjquerypolymerweb-componentpolymer-starter-kit

How to remove preloader after polymer WebComponentsReady loaded

I'm using polymer starter kit 1.3 as a base of my site and I want to remove loader div after body is loaded.

My code structure looks like this: (notice the "async" and "unresolved" attributes)

<head>
...
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
...
<link rel="import" id="bundle" href="/elements/elements.html" async>
...
</head>

    <body>    

          <div id="loader-wrapper" async">
            <div id="loader"></div>
          </div>

          <style async>
            ...
          </style>


       <template unresolved>
         ....
       </template>

       <script src="scripts/app.js" async></script>
    </body>

My app.js has

window.addEventListener('WebComponentsReady', function() {
    // imports are loaded and elements have been registered
     ...

  });

I tried

window.addEventListener('WebComponentsReady', function() {
    // imports are loaded and elements have been registered
     $('#loader-wrapper').remove();

  });

and of course it didn't work, because it's the only thing I found on google, and my js knowledge level is about zero.

The spinner loading instantly so I guess async attributes are about at the places they should be, but the loader stay there after page is loaded.

So, as far as I figured this is the code that listen for "something" unresolved to load and then it can remove that "loader-wrapper" div

The question is what code should I put there instead of "..." in that app.js code in order for that to happen ? Do I do anything wrong ?

Solution

  • What you have tried to use is jQuery. Most likely you are not importing jQuery in your index and most likely you shouldn't. What you want to use is the native window/document functions to remove the div.

    What we need to do is get the element. In this case with id as the element has id. After that we can remove it.

    var loaderWrapper = document.getElementById('loader-wrapper');
loaderWrapper.parentNode.removeChild(loaderWrapper);

    That will remove the div. We need to use the x.parentNode.removeChild(x) method as only way to remove something from the dom with native functions is to remove it through the parent.

    I would suggest that you read the following articles and implement your async element loading from that base. You will most likely need to change some things here and there but with time and if you are willing to learn you will succeed.

    Articles: