如何使用jquerymobile在Web應用程序中添加全屏歡迎圖像

Question

我認爲它在jQTouch中有，但是如何爲使用jQueryMobile開發的iPhone Web應用程序添加全屏歡迎圖像？

該應用程序是一個全屏網絡應用程序，它已經添加到iPhone的主屏幕。

Answer 1

這僅僅是一個概念，但你可以嘗試這樣的事：

活生生的例子：http://jsfiddle.net/yzvWy/14/

JS

$(function() { 
    setTimeout(hideSplash, 2000); 
}); 

function hideSplash() { 
    $.mobile.changePage("#home", "fade"); 
} 

HTML

<div data-role="page" data-theme="b" id="splash" style="background-color: #fff;"> 
    <div class="splash"> 
     <img src="http://jquerymobile.com/demos/1.0a4.1/docs/_assets/images/jquery-logo.png" alt="splash" /> 
    </div> 
</div> 
<div data-role="page" data-theme="b" id="home"> 
    <div data-role="content"> 
     <div data-role="content"> 
      <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b"> 
       <li data-role="list-divider">Overview</li> 
       <li><a href="docs/about/intro.html">Intro to jQuery Mobile</a></li> 
       <li><a href="docs/about/features.html">Features</a></li> 
       <li><a href="docs/about/accessibility.html">Accessibility</a></li> 
       <li><a href="docs/about/platforms.html">Supported platforms</a></li> 
      </ul> 
     </div> 
    </div> 
</div> 

Answer 2

的iOS有propertiary東西用於在應用程序加載時顯示飛濺。我沒有使用它，但（我也沒必要說），但在這裏，他們是怎麼說這是可以做到：

<link rel="apple-touch-startup-image" href="img/splash.png" /> 

你可能也想這樣：

<link rel="apple-touch-icon" href="./apple-touch-icon.png" /> 

在這裏看到更多： http://matt.might.net/articles/how-to-native-iphone-ipad-apps-in-javascript/

Answer 3

感謝您的幫助。這並不適用於當前Jquery Mobile的穩定版本，因爲它還不支持1.7。我設法結合這個問題的另一個解決方案，並提出：

$ (function(){ 
setTimeout(function(){ 
    $.mobile.changePage("#home", "fade"); 
}, 3000); 
}); 

謝謝！