imagem de inicialização cross-device javascript / css

Configurar uma tela inicial do iOS pode ser um verdadeiro desafio em termos de número de imagens necessárias, formatação e exibição regular em um aplicativo da web HTML5. Além disso, eles são limitados apenas ao iOS.

Este é um pequeno snippet em Javascript / CSS que adiciona uma imagem inicial genérica:

(1) adicione a classe .splash a um elemento do corpo da página e defina este CSS, que gera uma “tela” em branco e uma tela de carregamento

 .splash:before { 
/* dimensions */
width: 100%; 
position: absolute; 
top: 0; 
bottom: 0; 
left: 0; 
right: 0; 
display: block; 
height: 105% ; 
z-index: 999999;  

/* background canvas */
background-color: #fff;

/* loading... text */
content: "Birdseye"; 
text-align: center; 
font-size: 24px; 
font-family: Arial;
color: #fff; 
text-shadow: none; 
line-height: 150px; 
vertical-align: bottom; 
}

O CSS é necessário para cobrir a página enquanto a imagem de fundo é carregada. Isso também cuida de piscar, marcação não aprimorada ao usar, por exemplo, requireJS junto com Jquery Mobile).

(2) adicionar o seguinte script ao cabeçalho da página

 <script type="text/javascript">
var   screenSize = Math.max(screen.width,screen.height)
    , x
    , dir
    , w=screen.width
    , h=screen.height
    , o = window.orientation
    , sheet = document.styleSheets[0]; 

if ( navigator.platform ==="iPad" ){
    dir = ( o == 0 || o == 180)  ? "p" : "l";
} else {
    dir = ( w < h || ( o == 0 || o == 180) ) ? "p" : "l";
}

if ( screenSize < 320 ){
    x = "img/s_background_" + dir + ".jpg";
} else if ( screenSize > 320 && screenSize <= 767 ){
    x = "img/m_background_" + dir + ".jpg";
} else if ( screenSize > 768 && screenSize <= 1279 ){
    x = "img/l_background_" + dir + ".jpg";
} else {
    x = "img/xl_background_" + dir + ".jpg";
}

if ('addRule' in sheet) { 
    sheet.addRule(".splash:before", "background: url('" + x + "') no-repeat center center fixed; -webkit-background-size: 100%; -moz-background-size: 100%; -o-background-size: 100%; background-size: 100%; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;", 0); 
} else if ('insertRule' in sheet) { 
    sheet.insertRule(".splash:before { background: url('" + x + "') no-repeat center center fixed; -webkit-background-size: 100%; -moz-background-size: 100%; -o-background-size: 100%; background-size: 100%; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;" + " }", 0); 
} 

window.setTimeout(function(){
    document.getElementsByTagName("body")[0].className = document.getElementsByTagName("body")[0].className.replace(/bsplashb/,'');
    },4000);

</script>

O snippet está usando apenas Javascript, portanto, pode ser executado antes que qualquer biblioteca seja carregada e inicializada.

Primeiro, as dimensões e a orientação da tela são definidas. Isso não é realmente necessário se estiver usando uma única imagem inicial, mas o exemplo usa imagens diferentes dependendo do tamanho da tela (s, m, l, xl) e orientação (p, l) para capacidade de resposta em dispositivos diferentes.

Em seguida, a imagem é adicionada à classe inicial como plano de fundo CSS usando addRule / insertRule. background-size: cover é usado para expandir imagens em tela cheia com background-size: 100% sendo usado como um substituto para dispositivos não suportados.

Por último, a imagem é removida novamente removendo a classe inicial via setTimeout.

O snippet pode ser estendido (proporção min-dispositivo-pixel) e ainda precisa de um pouco de mágica para o IE8 e versões anteriores.

Código completo no Github https://github.com/frequent/splashview
Demo http://www.franckreich.de/jqm/splashview/demo.html