Question

我使用聚合物入门套件1.3作为我的网站的基础，我想在加载正文后删除加载器div。

我的代码结构如下所示：（注意＆＃34; async＆＃34;和＆＃34;未解决的＆＃34;属性）

<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();

  });

当然它没有用，因为它是我在谷歌上发现的唯一东西，我的js知识水平大约为零。

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

所以，据我所知，这是代码，它可以收听＆＃34;某些东西＆＃34;未解决加载，然后它可以删除＆＃34; loader-wrapper＆＃34;格

问题是我应该把代码放在那里而不是＆＃34; ...＆＃34;在那个app.js代码中，以便发生这种情况？我做错了吗？

Answer 1

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

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

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

那将删除div。我们需要使用x.parentNode.removeChild(x)方法作为从本机函数中删除dom的唯一方法是通过父项删除它。

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

文章：

Answer 2

作为一个好人@Snekw上面提到的，我能够解决问题，这里的所有代码都在下面。

如果其他人遇到同样的问题，也可以帮到你。

这就是页面的结构应该是什么样的（你想让spinner加载器打开的页面）

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

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

UPD：重要提示

它在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;

中的

然后导入

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

到elements.html

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

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

2 个答案: