Als guter Mensch @Snekw oben vorgeschlagen, ich war in der Lage, das Problem zu lösen, hier ist der gesamte Code unten unten .
Wenn jemand mit dem gleichen Problem konfrontiert ist, könnte es Ihnen auch helfen.
Dies ist, wie die Struktur der Seite aussehen sollte (die Seite, die Sie wollen auf den Spinner Loader hat)
(Bekanntmachung alle async und ungelöste Attribute)
<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>
Dann öffnen Ihre app.js -Datei (Advanced Polymer-Starter-Kit hat dies standardmäßig in/app/scripts /)
und finden dies:
// See https://github.com/Polymer/polymer/issues/1381
window.addEventListener('WebComponentsReady', function() {
// imports are loaded and elements have been registered
...
});
dann fügen Sie einfach den Code, der @Snekw vorgeschlagen, so dass es wie dieses
// 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);
});
sicher, was Ihre loader div hat Namen machen aussehen würde, wenn es nicht-Wrapper-Loader, vergessen Sie nicht zu ändern der Name im obigen jQuery-Code.
Wenn Sie nicht wissen, wie die Spinner loader Animation selbst zu erstellen, nur diesen Code verwenden unten unten
<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>
es ausdrückte dort statt
diese
<div id="loader-wrapper" async">
<div id="loader"></div>
</div>
<style async>
...
</style>
UPD: WICHTIGER HINWEIS
Es funktioniert perfekt und reibungslos in Firefox, weil es seine Zeit schön zeigt 1-3 Sekunden glatte Animation und dann glatt die Seite des Hauptinhalts zeigt
Wenn Sie jedoch eine sehr leichte Seite haben und Sie es öffnen In Chrom-ähnlichen Browsern wird die Seite viel schneller geladen als in Firefox (wahrscheinlich weil Firefox auch Polyfills lädt) und die Animation zeigt kaum, was zu Störungen führen kann, weil Ihre Seite so schnell geladen wird.
Um dies zu beheben ich animate.css verwendet (https://github.com/daneden/animate.css) und wickelte die ganze Vorlage mit
<div class="animated fadeIn"> <template.... ... </div>
Und dann änderte
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
zu
.animated {
-webkit-animation-duration: 3s;
animation-duration: 3s;
in belebter .css
dann
importiert
<link rel="stylesheet" href="../../styles/animate.css">
elements.html
einige intelligentere Dinge tun, wenn Sie wollen, ich bin nicht bekannt, dass andere, da ich bin neu zu Web-Entwicklung, vielleicht jemand anderes hinzufügen einige Ideen hier
Ich dachte, ich würde dazu kommentieren, wie ich in den letzten paar Tagen mit Polymer und Splash-Screens beschichtet habe. Ich habe [dies] (https://aerotwist.com/blog/polymer-for-the-performance-obsessed/) und [das] (https://github.com/PolymerElements/polymer-starter-kit /blob/master/docs/polymer-perf.md) sowie vulkanisieren, um den Begrüßungsbildschirm sofort anzuzeigen und anschließend die webcomponents.js und elements.html nachher zu laden. Nur gedacht, dass es dir helfen kann. :) – 2pha
Danke, das sind gute Ressourcen, die du gefunden hast, ich habe es jetzt ausprobiert und es funktioniert auch. Vielen Dank! – Un1