Question

如何为三星智能电视应用创建启动画面。

Answer 1

我认为这很简单。在index.html中使用启动画面添加一些div（包括样式）。

并在后台下载数据。数据加载后显示主应用程序屏幕。

Answer 2

这很容易。

您只需在index.htm中添加div标记：

<div id="splashscreen"></div>

在style.css中添加一些属性，如：

#spalshscreen{
 height: 720px; // Full height of the TV screen
 width: 1280px; // Full width of the TV screen
 background-image: url(...);
}

使用jQuery比在Main.js中你可以在给定时间内调用div上的show（）和hide（）函数：setTimeout（“javascript function”，milliseconds）;

e.g

function splashHide() { $('splashscreen').hide(); $('container').show(); }

window.onLoad(){
 $('splashscrean').show();
 $('container').hide();    // Container holds all other div-s in the app 
 setTimeout(splashHide(), 3000); // This will call splachHide() after 3 seconds. 
 // After 3 seconds splashscreen div will not be visible, while container div will be
}

这是这样做的一种方式。例如，您可以使用两个html文件来考虑另一个。

Answer 3

每个应用程序在启动之前都会检索/加载一些数据。这就是为什么我们使用启动画面（从开发者的角度来看）。

但遗憾的是，三星应用程序不允许我们修改启动画面。它有自己的黑色背景闪屏。它只允许用户修改我们的应用程序的徽标和名称。

但我们可以为此制定解决方法。我们可以显示一个带有加载器的假div，我们首选的背景和文本显示在它上面（假装它像一个闪屏）。好的一点是，我们可以在一开始就检索并预加载我们的应用程序所需的所有数据，然后显示我们的主屏幕。

您可以通过以下方式完成上述任务：

HTML：

<!-- Splash Screen -->
<div id="divSplash" class="splash hide">
    <div class="header">
        <img src="app/images/splashlogo.png" style="height: 110px;" />
    </div>
    <div class="bodyText">
        <div>Please wait, starting up...</div>
        <p id="splMessage"></p>
        <div class="ajax-spinner-bars">
        </div>
    </div>
    <div class="footer">
        <div>
            <label class="appName"></label>
        </div>
        <div style="font-size: 26px;">
            <label class="DBVersion"></label><label class="playerName dotdot"></label>
        </div>
    </div>
</div>

<强> CSS：

.splash {
position: fixed;
top: 0px;
background-image: url('../images/backdrop.png');
background-size: 100% 100%;
width: 100%;
height: 100%;
z-index: 1000;

}

<强> JS：
使用jquery promise执行所有任务sync / async，然后隐藏启动屏幕。

jQuery.when(Main.getDeviceInfo()).then(function(status) {
        jQuery("#divSplash").hide();
        Main.start();
    }, function(status) {
        // Some error perform necessary steps.
    });

希望它能在某种程度上帮助你。

如何为三星电视应用程序创建启动画面

3 个答案: