Как хороший человек @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 файл (стартовый набор полимера выдвинутую имеет это по умолчанию в/приложение/скрипты /)
и найти это:
// 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 загружает полиполки), а анимация едва показывает, что может вызвать некоторые сбои, потому что загрузка вашей страницы так быстро.
Чтобы решить эту проблему, я использовал 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">
в elements.html
ли какие-то умные вещи, если вы хотите, я не знаю ни другого, так как я новичок в веб-разработки, может быть, кто-то добавит некоторые идеи здесь
Я думал, что прокомментирую это, поскольку последние пятнадцать дней я покрывал полимер и заставки. Я использовал [это] (https://aerotwist.com/blog/polymer-for-the-performance-obsessed/) и [это] (https://github.com/PolymerElements/polymer-starter-kit /blob/master/docs/polymer-perf.md), а также вулканизировать, чтобы эффективно отображать экран всплеска, а затем загружать webcomponents.js и elements.html после. Просто подумал, что это может вам помочь. :) – 2pha
Спасибо, это хорошие ресурсы, которые вы нашли, я попробовал это сейчас, и он тоже работает. Благодаря! – Un1