javascript - スプラッシュ画面にプログレス リングを追加する方法

Question

javascriptを使用してwin 8アプリに取り組んでいます。アプリがロードされるまでスプラッシュ画面にプログレスリングを追加し、データがロードされるまでハブページにプログレスリングを追加するにはどうすればよいですか?

Answer 1

Microsoft has posted a nice sample on MSDN with the nitty gritty details (see here), but here are the basics.

• In your application, include a new DIV that is an immediate child of body, and set it's style as:

Example:

.myExtendedSplash {
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    background-color: red; // your app colour
}

• Inside the application include your app's splash image, positioned appropriately (requires script, see the sample)
• Add a <progress class="win-ring win-medium></progress> to your splashscreen div you created in the first step

Boom!

The complexity comes from:

• needing to have the exact position of the OS splash, which is on the activated event args
• Needing adjust the position of this splash screen if the user changes the screen resolution or orientation while you are showing it (handle window resize, and the event args get updated)