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

How to remove preloader after polymer WebComponentsReady loaded

本文关键字：加载 删除 WebComponentsReady 聚合物      更新时间：2023-09-26

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

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

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

我的应用.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知识水平大约为零。

微调器立即加载，

所以我想异步属性大约在它们应该在的地方，但加载器在加载页面后留在那里。

因此，据我认为，这是侦听要加载的"某些东西"的代码，然后它可以删除"加载器包装器"div

问题是我应该在那里放什么代码而不是"..."在该应用程序中.js代码以发生这种情况？我做错了什么吗？

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

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

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

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

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

文章：

  • https://aerotwist.com/blog/polymer-for-the-performance-obsessed/
  • https://github.com/PolymerElements/polymer-starter-kit/blob/master/docs/polymer-perf.md
  • https://gist.github.com/ebidel/1ba71473d687d0567bd3

作为上面建议@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);
  });

确保你的loaderdiv有一个名字，如果它不是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 也加载了 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;

在动画中.css

然后导入 

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

到元素.html

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

相关文章：