added welcome screen and preloading for images

rossengeorgiev · rossengeorgiev · commit ea052bc412fd · 2013-01-02T16:48:01.000+02:00
diff --git a/css/main.css b/css/main.css
@@ -10,6 +10,14 @@ html, body {
     height: 100%;
 }
 
+#loading {
+    position: absolute;
+    z-index: 99;
+    width: 100%;
+    height: 100%;
+    background: #00A3D3 url('../img/logo.png') no-repeat center center;
+}
+
 header {
     padding: 0;
     margin: 0;
diff --git a/img/logo.png b/img/logo.png
diff --git a/index.html b/index.html
@@ -27,21 +27,25 @@
         <script type="text/javascript" language="javascript" src="js/app.js?nocache=1"></script>
     </head>
     <body onload="load();">
-    <header>
+
+    <div id="loading"></div>
+
+    <header style="display: none">
         <div class="container">
             <ol class="nav">
                 <li class="home"></li>
                 <li class="navigation"></li>
                 <li class="chasecar"></li>
                 <li class="stations"></li>
             </ol>
-            <span id="app_name"><b>tracker</b></span>
+            <span id="app_name"><b>mobile<br/>tracker</b></span>
         </div>
     </header>
 
 
-    <div id="map"></div>
-    <div id="main">
+
+    <div id="map" style="dispaly: none"></div>
+    <div id="main" style="dispaly: none">
         <div class="scrollwrapper">
         <div class="portrait"></div>
         <div class="landscape"></div>
diff --git a/js/app.js b/js/app.js
@@ -1,10 +1,20 @@
 var listScroll;
+var nLoadedImages = 0;
+var preloadTimer;
+var preloadImages = [ 
+    "img/logo.png",    
+    "img/marker-you.png",    
+    "img/menu-icons.png",    
+];
 
 function hideAddressbar()
 {
     window.scrollTo(0, 1);
 }
 
+function checkPreload() {
+}
+
 
 $(window).ready(function() {
     window.onorientationchange = hideAddressbar();
@@ -74,4 +84,25 @@ $(window).ready(function() {
             });
         }, 10000); // poll every 10sec;
     }
+
+    // preload images
+    var i = 0;
+    for(i = 0; i < preloadImages.length; i++) {
+        var image = new Image();
+        image.onLoad = (function() { nLoadedImages++; })();
+        image.src = preloadImages[i];
+    }
+
+    // check if images have loaded
+    preloadTimer = setInterval(function() {
+        if(nLoadedImages < preloadImages.length) return;
+        clearInterval(preloadTimer);
+
+        // app stars with a welcome screen
+        // after images are loaded we can show the interface
+        setTimeout(function() {
+            $('#loading').hide();
+            $('header,#main,#map').show();
+        }, 500);
+    }, 100);
 });
