cómo agregar una imagen de bienvenida en pantalla completa en una aplicación web usando jquerymobile

Question

Creo que está ahí en jQTouch, pero ¿cómo agrego una imagen de bienvenida en pantalla completa para mi aplicación web para iPhone desarrollada usando jQueryMobile?

La aplicación es una aplicación web a pantalla completa y ya se ha agregado en la pantalla de inicio del iPhone.

Answer 1

esto es sólo un concepto, sino que podría intentar algo como esto:

Ejemplo vivo: 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 tiene sus cosas propertiary para mostrar un splash mientras se carga la aplicación. Yo no lo uso todavía (no necesitaba eso) pero aquí está la forma en que dicen que puede hacerse:

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

Es posible que desee esto también:

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

Vea aquí para más: http://matt.might.net/articles/how-to-native-iphone-ipad-apps-in-javascript/

Answer 3

Gracias por la ayuda. Esto no funcionó con la versión estable actual de Jquery Mobile, ya que aún no es compatible con 1.7. Me las arreglé para combinar otra solución al respecto y se me ocurrió:

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

Gracias!