显示启动画面，直到Web浏览器呈现页面
[英]Show Splash screen until Web Browser has rendered the page
问题描述
Creating a Windows Phone 7 app that wraps over an HTML 5 web app with the WebBrowser widget. 
使用WebBrowser小部件创建包装HTML 5 Web应用程序的Windows Phone 7应用程序。
Is there any way to keep the splash screen (splashscreenimage.jpg) until WebBrowser has fully rendered the web page? 有没有办法保持启动画面（splashscreenimage.jpg）直到WebBrowser完全呈现网页？ (it shows white before the page is rendered) （在呈现页面之前显示白色）
4 个解决方案
解决方案1
2 已采纳 2011-12-12 22:06:52
The default screenshot image is displayed until the first page in the application has loaded. 将显示默认屏幕截图图像，直到加载应用程序中的第一页。 It will be after this point that the content has finished being rendered. 在此之后，内容已经完成呈现。
The WebBrowser control as a Loaded event but this is not the same as the contents of the page having been rendered. WebBrowser控件作为Loaded事件，但这与已呈现的页面内容不同。 (If the contents of the page are complicated and take time to be fully rendered this will contribute to the length of time that the white/blank screen is displayed.) （如果页面内容很复杂并且需要时间来完全呈现，这将有助于显示白色/空白屏幕的时间长度。）
You'll need to implement your own splash screen to get the effect you're after. 您需要实现自己的启动画面才能获得您想要的效果。 Do this in XAML rather than HTML or your HTML splashscreen will suffer the same issue you have now. 在XAML而不是HTML中执行此操作，否则您的HTML启动画面将遇到与现在相同的问题。 Add the image to the same page as the WebBrowser but have it over the top of the WebBrowser control. 将图像添加到与WebBrowser相同的页面，但将其放在WebBrowser控件的顶部。 Change its Visibility once you know the underlying content has been displayed. 一旦您知道已显示基础内容，请更改其可见性。
If you can be confident of the amount of time it takes for the contents of the page to be rendered then you could simply add a delay once the WebBrowsers Loaded event has fired. 如果您可以确信呈现页面内容所需的时间，那么只需在WebBrowsers Loaded事件触发后添加延迟即可。 You'll probably want to test this on various devices though. 您可能希望在各种设备上测试它。 And maybe add a little extra time just to make sure. 也许可以添加一些额外的时间来确保。
If you don't know how long it'll take, then allow enough time to be sure that most of the time it will have loaded and you don't run into any of the marketplace certification requirements around startup time. 如果您不知道需要多长时间，那么请留出足够的时间来确保它将在大部分时间内加载，并且您不会在启动时遇到任何市场认证要求。 If this an issue you may want to ensure that the first HTML page loaded is simple and then progressively load the rest of the content. 如果出现此问题，您可能需要确保加载的第一个HTML页面很简单，然后逐步加载其余内容。
Alternatively, you could add some code to the page which will notify the hosting page once the Body of the document has been Loaded. 或者，您可以向页面添加一些代码，一旦文档的主体已加载，它将通知主机页面。
解决方案2
0 2011-12-09 20:56:52
Web-browser only apps will not get through certification. 仅限网络浏览器的应用程序无法获得认证。
That said, you could display the image yourself until the LoadCompleted on the WebBrowser fires. 也就是说，您可以自己显示图像，直到WebBrowser上的LoadCompleted触发为止。
解决方案3
0 2011-12-10 15:14:24
You can try this. 你可以试试这个。
- display a splash image over the html using css with z-index or/and absolute positioning 使用带有z-index或/和绝对定位的css在html上显示启动图像
- Place a element at the end of the page just before closing body 在关闭正文之前，在页面末尾放置一个元素
- check for existence of element. 检查元素是否存在。
- If element exists you can remove the splash screen 如果元素存在，则可以删除启动画面
I would suggest you remove the screen with a few second delay so that all images are loaded 我建议你删除屏幕几秒延迟，以便加载所有图像
解决方案4
0 2011-12-10 16:15:51
Put this style in the <head> : 将此样式放在<head> ：
<style>
#splash {
position: absolute;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
background: #fff;
}
</style>
put your splash screen div at the beginning of <body> : 把你的初始屏幕div放在<body>的开头：
<body>
<div id="splash">
... splash screen contents ...
</div>
....
and just before closing the body tag: 在关闭body标签之前：
....
<script type="text/javascript">
document.getElementById('splash').style['display'] = 'none';
</script>
</body>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.