changeset 44:d3ed74176b4d

added module preloading and loading screen
author Atul Varma <avarma@mozilla.com>
date Sat, 24 Apr 2010 19:04:38 -0700
parents 0974c1df3714
children 72d01c7d5258
files css/main.css js/main.js js/require.js main.html
diffstat 4 files changed, 40 insertions(+), 8 deletions(-) [+]
line wrap: on
line diff
--- a/css/main.css	Sat Apr 24 18:33:45 2010 -0700
+++ b/css/main.css	Sat Apr 24 19:04:38 2010 -0700
@@ -41,6 +41,11 @@
     float: right;
 }
 
+#loading-screen {
+    width: 2em;
+    margin: 10em auto;
+}
+
 #reports .container {
     display: table;
 }
--- a/js/main.js	Sat Apr 24 18:33:45 2010 -0700
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,5 +0,0 @@
-$(window).ready(
-  function() {
-    var require = Require.build(Require.modules, {jQuery: jQuery});
-    require("app/ui").init(document);
-  });
--- a/js/require.js	Sat Apr 24 18:33:45 2010 -0700
+++ b/js/require.js	Sat Apr 24 19:04:38 2010 -0700
@@ -18,6 +18,24 @@
       }
       return moduleExports[module];
     };
+  },
+  preload: function preload(document, scripts, cb) {
+    var scriptsLeft = scripts.length;
+
+    function onScriptLoaded() {
+      scriptsLeft--;
+      if (!scriptsLeft)
+        cb();
+    };
+
+    scripts.forEach(
+      function(scriptName) {
+        var script = document.createElement("script");
+
+        script.src = scriptName;
+        script.onload = onScriptLoaded;
+        document.body.appendChild(script);
+      });
   }
 };
 
--- a/main.html	Sat Apr 24 18:33:45 2010 -0700
+++ b/main.html	Sat Apr 24 19:04:38 2010 -0700
@@ -15,6 +15,7 @@
     <li title="file-bug">File A Bug</span>
   </ul>
 </div>
+<div id="loading-screen" class="loading">&nbsp;</div>
 <div id="reports">
 </div>
 <div id="login" class="dialog">
@@ -43,8 +44,21 @@
 <!-- Base Scripts -->
 <script src="js/jquery.js"></script>
 <script src="js/require.js"></script>
-<script src="js/main.js"></script>
+<script>
+$(window).ready(function() {
+  var moduleScripts = [
+    "js/modules/app.js"
+  ];
 
-<!-- CommonJS Modules -->
-<script src="js/modules/app.js"></script>
+  var customModuleExports = {
+    jQuery: jQuery
+  };
+
+  Require.preload(document, moduleScripts, function whenLoaded() {
+    $("#loading-screen").hide();
+    var require = Require.build(Require.modules, customModuleExports);
+    require("app/ui").init(document);
+  });
+});
+</script>
 </html>