Javascript 聚合物网络组件准备加载后如何卸下预紧器

我正在使用聚合物起动器工具包1.3作为我的网站的基础，我想删除后，身体加载加载div

我的代码结构如下所示： （注意“异步”和“未解析”属性）

我试过了

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

  });

当然，它不起作用，因为这是我在谷歌上找到的唯一东西，我的js知识水平大约为零

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

因此，据我所知，这是一段代码，它侦听要加载的未解决的内容，然后可以删除“loader wrapper”div

---

问题是为了实现这一点，我应该在app.js代码中添加什么代码而不是“…”呢？我做错了什么吗？

您尝试使用的是jQuery。很可能您没有在索引中导入jQuery，也很可能不应该导入。您要使用的是本机窗口/文档函数来删除div

我们需要做的是得到元素。在这种情况下，id作为元素的id。之后，我们可以删除它

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

这将删除div。我们需要使用

x.parentNode.removeChild（x）

方法，因为使用本机函数从dom中删除某些内容的唯一方法是通过父级将其删除

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

文章：

---

正如上文提到的一个好人@Snekw，我能够解决这个问题，下面是所有代码

如果有其他人面临同样的问题，它也可能会帮助你

这就是页面的结构应该是什么样的（您希望打开微调器加载程序的页面）

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

然后简单地添加@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);
  });

确保loader div的名称是什么，如果它不是loader wrapper，也不要忘记在上面的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>

到

在animate.css中

然后输入

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

到elements.html

---

如果你想做一些更聪明的事情，我不知道还有其他什么，因为我是网络开发新手，也许其他人会在这里添加一些想法

我想我会对此发表评论，因为我在过去几天一直在用聚合物和闪屏进行电镀。我一直在使用和以及硫化，以有效地让启动屏幕立即显示，然后加载webcomponents.js和elements.html后。我只是觉得这对你有帮助。：）谢谢你，这些都是你找到的很好的资源，我现在试过了，它也很有效。谢谢

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

  });

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

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

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

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