ポリマー2スプラッシュスクリーン

ポリマー2を使用してより大きなプロジェクトを開始しました。ブラウザのキャッシュ（クローム）をクリアした後、私持って、次の負荷統計：ポリマー2スプラッシュスクリーン

113要求
986キロバイト転送
フィニッシュ：6.43秒
DOMContentLoaded：347ms
がロード：3.48秒

Chromeで示されています。

最初の読み込みにはそれほど時間がかかりませんが、何かが読み込まれているシンプルな（アニメーション化された）ディスプレイがあればいいでしょう。テストとして、メイン（シェル）要素の前に単に<h1>Loading...</h1>を含めました。その結果、約3秒間何も表示されず、私のLoadingラベルが表示され、1秒後にコンテンツ全体が表示されます。

これは、ポリマーテンプレートが<body>の前にシェル要素に<link>を持ち、ボディの中に何かがレンダリングされる前にすべての依存関係が読み込まれているからです。

スプラッシュスクリーンのようなものをすぐに表示するために何ができるのですか？必要に応じて私はindex.html全体を表示することができますが、基本的にはPSKアプリケーションテンプレートと同じです。

出典

2017-08-15 NicolasR

例として、SHOP appを利用できます。フルコードはhttps://github.com/Polymer/shopです。

基本的には、シェルまたはメインアプリの<body>では、webコンポーネントjs loaderを読み込んでメインアプリケーションをインポートして、遅れてバックグラウンドでインポートすることができます。

<body> 

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

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

</body>

これは、すべてのリソースが完全にロードされるまで、Loading...と表示されます。

出典

2017-08-16 00:16:16 Ofisora

これは簡単ですか？私はほとんどそれを信じることができない;-)ありがとう。 – NicolasR

ポリマー2スプラッシュスクリーン

答えて

関連する問題