如何爲三星電視應用程序創建啓動畫面

Question

如何爲三星智能電視應用程序創建啓動畫面。

Answer 1

我認爲這很簡單。在index.html中添加一些帶閃屏的div（包括樣式）。

並在後臺下載數據。數據加載後顯示主應用程序屏幕。

Answer 2

這很容易。

你只需把一個div標籤在你的index.htm：使用jQuery你Main.js

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

而且比：

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

在style.css中添加一些屬性，如可以在給定時間調用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，我們的首選背景和文本顯示在它上面（僞裝成啓動畫面）。好的一點是，我們可以在一開始就檢索並預先載入我們應用程序所需的所有數據，然後顯示我們的主屏幕。

您可以通過此achive上述任務：

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的承諾，然後隱藏啓動畫面。

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

希望它會幫助你在一定程度上。