Polymer-2 splash-screen

J'ai commencé avec un projet plus important utilisant Polymer-2. Après avoir effacé le cache du navigateur (Chrome) je les statistiques de charge suivantes:Polymer-2 splash-screen

113 demande
986 KB transféré
Finition: 6,43 de
DOMContentLoaded: 347ms
Loaded: 3,48 s

comme indiqué par Chrome.

Bien que ce ne soit pas vraiment long pour un premier chargement, il serait bien qu'il y ait un simple affichage (animé) que quelque chose charge. Comme un test, j'ai simplement inclus un <h1>Loading...</h1> avant mon élément principal (shell). Le résultat est qu'environ 3 s rien n'est encore affiché, alors mon étiquette de chargement est affichée et 1 s plus tard, tout le contenu est affiché.

Je suppose que cela est dû au fait que le modèle Polymer a un <link> à l'élément shell avant le <body> et charge toutes les dépendances avant que tout élément du corps ne soit rendu.

Une idée de ce que je pourrais faire pour avoir quelque chose comme un splash-screen montré immédiatement? Si nécessaire, je pourrais montrer tout mon index.html mais c'est essentiellement le même que le modèle d'application PSK.

Source

2017-08-15 NicolasR

À titre d'exemple, vous pouvez prendre le SHOP app. Le code complet peut être trouvé ici: https://github.com/Polymer/shop. Fondamentalement, dans votre shell ou <body> de votre shell ou de votre application principale, vous pouvez simplement charger loader webcomponents js et importer l'application principale après cela afin que l'importation se fasse paresseusement et en arrière-plan.

<body> 

    <main-app>Loading...</main-app> 

    <script src="bower_components/webcomponentsjs/webcomponents-loader.js"></script> 
    <link rel="import" href="src/main-app.html"> 

</body>

Cela montrera Loading... jusqu'à ce que toutes les ressources sont à pleine charge.

Source

2017-08-16 00:16:16 Ofisora

Aussi simple que cela? Je ne peux presque pas le croire ;-) Merci. – NicolasR

Polymer-2 splash-screen

Répondre

Questions connexes