如何在加载聚合物 WebComponentsReady 后删除预加载器

Question

我正在使用 Polymer Starter kit 1.3 作为我网站的基础，我想在加载正文后删除加载器 div。

我的代码结构如下所示：（注意 "async" 和 "unresolved" 属性）

<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>

我的app.js有

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

  });

我试过了

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

  });

当然没用，因为我在google上只找到了它，我的js知识水平几乎为零。

微调器立即加载，所以我猜异步属性大约在它们应该在的位置，但加载器在页面加载后停留在那里。

因此，据我所知，这是侦听 "something" 未解析 加载的代码，然后它可以删除 "loader-wrapper" div

问题是我应该在 app.js 代码中放置什么代码而不是“...”才能实现？我做错了什么吗？

Answer 1

您尝试使用的是jQuery。很可能您没有在索引中导入 jQuery，而且您很可能不应该。您要使用的是本机 window/document 函数来删除 div.

我们需要做的是获取元素。在这种情况下，id 因为元素有 id。之后我们就可以删除它了。

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

这将删除 div。我们需要使用 x.parentNode.removeChild(x) 方法，因为使用本机函数从 dom 中删除某些内容的唯一方法是通过父级删除它。

我建议您阅读以下文章并从该基础实现异步元素加载。您很可能需要随时间改变一些事情，但随着时间的推移，如果您愿意学习，您就会成功。

文章：

Answer 2

作为@Snekw 上面建议的好人，我能够解决问题，下面是所有代码。

如果其他人遇到同样的问题，它也可能对您有所帮助。

页面结构应该是这样的（您想要的页面有微调加载器）

（注意所有异步和未解析的属性）

<head>
...
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
...
<link rel="import" id="bundle" href="/elements/elements.html">
...
</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>

然后打开你的 app.js 文件 （高级聚合物入门套件在 /app/scripts/ 中默认有这个）

并找到这个：

  // See https://github.com/Polymer/polymer/issues/1381
  window.addEventListener('WebComponentsReady', function() {
     // imports are loaded and elements have been registered
     ...

  });

然后简单地添加@Snekw 建议的代码，它看起来像这样

  // See https://github.com/Polymer/polymer/issues/1381
  window.addEventListener('WebComponentsReady', function() {
    // imports are loaded and elements have been registered

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

确保您的加载程序 div 的名称是什么，如果它不是加载程序包装器，也不要忘记在上面的 jquery 代码中更改名称。

如果您不知道如何自己创建微调加载器动画，只需使用下面的代码

<div id="loader-wrapper" async style="z-index: -100; ">
    <div id="loader"></div>
</div>

  <style async>
#loader-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
}
#loader {
    display: block;
    position: relative;
    left: 50%;
    top: 50%;
    width: 150px;
    height: 150px;
    margin: -75px 0 0 -75px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #3498db;
    -webkit-animation: spin 2s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
    animation: spin 2s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
}

#loader:before {
    content: "";
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #e74c3c;
    -webkit-animation: spin 3s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
      animation: spin 3s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
}

#loader:after {
    content: "";
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #f9c922;
    -webkit-animation: spin 1.5s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
      animation: spin 1.5s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
}

@-webkit-keyframes spin {
    0%   {
        -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(0deg);  /* IE 9 */
        transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
    }
    100% {
        -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(360deg);  /* IE 9 */
        transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
    }
}
@keyframes spin {
    0%   {
        -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(0deg);  /* IE 9 */
        transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
    }
    100% {
        -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(360deg);  /* IE 9 */
        transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
    }
}


  </style>

把它放在那里而不是

这个

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

          <style async>
            ...
          </style>

更新：重要提示

它在 Firefox 中完美流畅地运行，因为它花时间很好地显示 1-3 秒的流畅动画，然后流畅地显示主要内容的页面

但是，如果您有一个非常轻量级的页面，并且您像浏览器一样在 Chromium 中打开它，那么该页面的加载速度会比在 Firefox 中快得多（可能是因为 Firefox 也加载了 polyfill）并且动画几乎不显示，这可能会导致一些故障是因为您的页面加载速度太快了。

为了解决这个问题，我使用了 animate.css (https://github.com/daneden/animate.css) 并用

包裹了整个模板

<div class="animated fadeIn"> <template.... ... </div>

然后改成

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;

至

.animated {
  -webkit-animation-duration: 3s;
  animation-duration: 3s;

在animate.css

然后导入

<link rel="stylesheet" href="../../styles/animate.css">

到elements.html

如果你愿意，可以做一些更聪明的事情，因为我是 web 开发的新手，所以我不知道任何其他事情，也许其他人会在这里添加一些想法

如何在加载聚合物 WebComponentsReady 后删除预加载器

How to remove preloader after polymer WebComponentsReady loaded

javascript

jquery

web-component

polymer

polymer-starter-kit