1

我使用聚合物入门套件 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知识水平大约为零。

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

因此，据我所知，这是侦听未解决加载的“某些东西”的代码，然后它可以删除该“loader-wrapper” div

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

4

2 回答 2

1

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

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

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

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

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

文章：

于 2016-04-22T18:20:05.830 回答
0

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

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

这就是页面结构的样子（您希望在页面上有微调器加载器）

（注意所有的 async 和 unresolved 属性）

<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 文件（polymer starter kit advanced 在 /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 具有什么名称，如果它不是 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>

把它放在那里而不是

这个

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

          <style async>
            ...
          </style>

UPD：重要提示

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

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

为了解决这个问题，我使用了 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">

到元素.html

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

于 2016-04-23T13:08:17.567 回答