cross-device javascript/css startup image

Setting up an iOS splashscreen can be a real challenge in terms of number of images required, formatting and getting them to display regularly in an HTML5 web-app. Plus they are limited to iOS only.

This is a small snippet in Javascript/CSS that adds a generic splash image:

(1) add .splash class to a page body element and set this CSS, which generates a blank "canvas" and loading screen

 .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; 
}

The CSS is needed to cover-up the page while the background image is loaded. Also this takes care of blinking, unenhanced markup when for example using requireJS along with Jquery Mobile).

(2) add the following script to the page head

 <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(/\bsplash\b/,'');
    },4000);

</script>

The snippet is only using Javascript, so it can be run before any libs are loaded and initalized.

First the screen dimensions and orienation are set. This is not really needed if using a single splash image, but the example uses different images depending on screen size (s,m,l,xl) and orientation (p,l) for responsiveness on different devices.

Next the image is added on the splash class as CSS background using addRule/insertRule. background-size:cover is used to expand images fullscreen with background-size:100% being used as a fallback for non supported devices.

Last the image is removed again by removing the splash class via setTimeout.

The snippet could be extended (min-device-pixel-ratio) and still needs some magic for IE8 and below.

Full code on Github https://github.com/frequent/splashview
Demo http://www.franckreich.de/jqm/splashview/demo.html