Show Splash screen until Web Browser has rendered the page
Question
Creating a Windows Phone 7 app that wraps over an HTML 5 web app with the WebBrowser widget.
Is there any way to keep the splash screen (splashscreenimage.jpg) until WebBrowser has fully rendered the web page? (it shows white before the page is rendered)
4 answers
solution1
2 ACCPTED 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. (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. Add the image to the same page as the WebBrowser but have it over the top of the WebBrowser control. 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. 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.
Alternatively, you could add some code to the page which will notify the hosting page once the Body of the document has been Loaded.
solution2
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.
solution3
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
- 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
solution4
0 2011-12-10 16:15:51
Put this style in the <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> :
<body>
<div id="splash">
... splash screen contents ...
</div>
....
and just before closing the body tag:
....
<script type="text/javascript">
document.getElementById('splash').style['display'] = 'none';
</script>
</body>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.