bootstrap angular on "document ready" instead of window.onload

- use jqLite api to bootstrap angular - when jQuery is present DOMContentLoaded or hacks for IE are used - when jqLite is present DOMContentLoaded is used for modern browsers and IE9 and window.onload is used for other browsers. - test html for comparing DOMContentLoaded with window.onload Closes angular#224
ExFlo · Jan 10, 2011 · c79aba9 · c79aba9
1 parent 84dedb8
commit c79aba9
Show file tree

Hide file tree

Showing 6 changed files with 58 additions and 14 deletions.
diff --git a/perf/DCLvsWindowOnLoad.html b/perf/DCLvsWindowOnLoad.html
@@ -0,0 +1,37 @@
+<!doctype html>
+<!--
+
+This test demonstrates the time difference between document's DOMContentLoaded and window's load events.
+
+-->
+<html>
+  <head>
+    <script>
+      startTS = new Date().getTime();
+      onDOMContentLoadedTS = 0; // default for browsers where DOMCL is not supported
+    </script>
+    <title>DOMContentLoaded test</title>
+    <script src="../build/angular.min.js" ng:autobind></script>
+    <script>
+      angular.element(document).bind('DOMContentLoaded', function(e) {onDOMContentLoadedTS = new Date().getTime()});
+      angular.element(window).bind('load', function(e) {
+          onloadTS = new Date().getTime();
+          log.innerHTML = 'start: ' + new Date(startTS) + '<br/>DOMContentLoaded: +' + (onDOMContentLoadedTS - startTS) +  'ms<br/> load: +' + (onloadTS - startTS) + 'ms';
+        });
+    </script>
+  </head>
+  <body>
+    <h1>DOMContentLoaded test</h1>
+    <p>{{ 'yay!' || 'angular starting...' }}</p>
+
+    <img width="100px" src="http://lh5.ggpht.com/_BLyMhylclm0/TST_bbGH0zI/AAAAAAAAATY/oNUn9kivKN8/s912/1020047.jpg" />
+    <img width="100px" src="http://lh5.ggpht.com/_MqEybfAuUFk/TSOOiegUlPI/AAAAAAAADHY/AEwEWc64_-M/s800/IMG_7294.JPG" />
+    <img width="100px" src="http://lh3.ggpht.com/_LdjD3ua8rpE/TSOW99rwjZI/AAAAAAAAFC0/0qJRhhN45RM/s912/Saison%2010%20%2834%29.JPG" />
+    <img width="100px" src="http://lh6.ggpht.com/_oy_-am3CVUw/TSOQBddZpwI/AAAAAAAACaw/ogFgoD79bVE/s912/P1100886.JPG" />
+    <img width="100px" src="http://lh4.ggpht.com/_srSaA7ZN7oc/TDdxXbA_i1I/AAAAAAAAQ2w/ii3vgrnfCrM/s800/Urlaub10%20157.jpg" />
+    <img width="100px" src="http://lh5.ggpht.com/_y6vXu6iRrfM/SIaYhRQBYNI/AAAAAAAAAmE/lV2NYwxtsQM/s912/North%20Dakota%20Trip%20014.JPG" />
+    <img width="100px" src="http://lh5.ggpht.com/_Jjv9cIn9cS8/RuwZCgfOl6I/AAAAAAAAAOc/QrrMe8vpawg/s800/Shark%20Trip%20-%20day%202%20513.JPG" />
+
+    <p id="log"></p>
+  </body>
+</html>
diff --git a/src/angular.prefix b/src/angular.prefix
@@ -21,4 +21,4 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
  * THE SOFTWARE.
  */
-(function(window, document, previousOnLoad){
+(function(window, document){
diff --git a/src/angular.suffix b/src/angular.suffix
@@ -1,9 +1,6 @@
 
-  window.onload = function(){
-    try {
-      if (previousOnLoad) previousOnLoad();
-    } catch(e) {}
+  jqLite(document).ready(function(){
     angularInit(angularJsConfig(document));
-  };
+  });
 
-})(window, document, window.onload);
+})(window, document);
diff --git a/src/jqLite.js b/src/jqLite.js
@@ -87,6 +87,19 @@ JQLite.prototype = {
     })(this[0]);
   },
 
+  ready: function(fn) {
+    var fired = false;
+
+    function trigger() {
+      if (fired) return;
+      fired = true;
+      fn();
+    }
+
+    this.bind('DOMContentLoaded', trigger); // works for modern browsers and IE9
+    jqLite(window).bind('load', trigger); // fallback to window.onload for others
+  },
+
   bind: function(type, fn){
     var self = this,
         element = self[0],

diff --git a/src/scenario/angular.prefix b/src/scenario/angular.prefix
@@ -21,5 +21,5 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
  * THE SOFTWARE.
  */
-(function(window, document, previousOnLoad){
+(function(window, document){
   var _jQuery = window.jQuery.noConflict(true);
diff --git a/src/scenario/angular.suffix b/src/scenario/angular.suffix
@@ -1,10 +1,7 @@
   var $scenario = new angular.scenario.Runner(window);
 
-  window.onload = function() {
-    try {
-      if (previousOnLoad) previousOnLoad();
-    } catch(e) {}
+  jqLite(document).ready(function() {
     angularScenarioInit($scenario, angularJsConfig(document));
-  };
+  });
 
-})(window, document, window.onload);
+})(window, document);