在Web浏览器呈现页面之前显示启动画面

Show Splash screen until Web Browser has rendered the page

本文关键字：启动 动画 显示 Web 浏览器      更新时间：2023-09-26

创建一个Windows Phone 7应用程序，该应用程序将一个带有WebBrowser小部件的HTML 5 web应用程序包裹起来。

是否有办法保持启动屏幕(splashscreenimage.jpg)，直到WebBrowser已经完全渲染网页?(在页面呈现之前显示白色)

默认截图图像一直显示到应用程序的第一个页面加载完成。在此之后，内容将完成渲染。

将WebBrowser控件作为Loaded事件，但这与已呈现的页面内容不同。(如果页面的内容比较复杂，需要一定的时间才能完全呈现，这将导致白屏/空白屏的显示时间过长。)

你需要实现你自己的闪屏来获得你想要的效果。在XAML而不是HTML中执行此操作，否则您的HTML闪屏将遭受与现在相同的问题。将图像添加到与WebBrowser相同的页面，但将其置于WebBrowser控件的顶部。一旦您知道底层内容已经显示，就更改其可见性。

如果你对渲染页面内容所需的时间有信心，那么你可以在WebBrowsers Loaded事件触发后简单地添加延迟。不过你可能需要在不同的设备上进行测试。也许再加一点额外的时间来确保。
如果您不知道需要多长时间，那么请留出足够的时间来确保大多数时间它都已加载，并且您不会在启动时遇到任何市场认证要求。如果这是一个问题，你可能想要确保加载的第一个HTML页面是简单的，然后逐步加载其余的内容。

或者，您可以在页面中添加一些代码，以便在加载文档主体后通知托管页面。

仅限web浏览器的应用程序将无法通过认证。

也就是说，你可以自己显示图像，直到WebBrowser上的LoadCompleted触发。

你可以试试这个

  1. 使用带有z-index或/和绝对定位的css在html上显示醒目图像
  2. 将元素放置在页面末尾，就在结束正文之前
  3. 检查元素是否存在。
  4. 如果元素存在，你可以删除闪屏

我建议你用几秒钟的延迟删除屏幕，以便加载所有图像

把这个样式放到<head>:

<style>
    #splash {
        position: absolute;
        top: 0px;
        left: 0px;
        bottom: 0px;
        right: 0px;
        background: #fff;
    }
</style>

把你的闪屏div放在<body>开头:

<body>
        <div id="splash">
            ... splash screen contents ...
        </div>
....

和body标签结束前:

....
    <script type="text/javascript">
        document.getElementById('splash').style['display'] = 'none';
    </script>
</body>
相关文章：