mirror of
https://github.com/Hopiu/angular.js.git
synced 2026-03-17 15:40:22 +00:00
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 #224
This commit is contained in:
parent
84dedb81e7
commit
c79aba92f6
6 changed files with 58 additions and 14 deletions
37
perf/DCLvsWindowOnLoad.html
Normal file
37
perf/DCLvsWindowOnLoad.html
Normal file
|
|
@ -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>
|
||||||
|
|
@ -21,4 +21,4 @@
|
||||||
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
||||||
* THE SOFTWARE.
|
* THE SOFTWARE.
|
||||||
*/
|
*/
|
||||||
(function(window, document, previousOnLoad){
|
(function(window, document){
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,6 @@
|
||||||
|
|
||||||
window.onload = function(){
|
jqLite(document).ready(function(){
|
||||||
try {
|
|
||||||
if (previousOnLoad) previousOnLoad();
|
|
||||||
} catch(e) {}
|
|
||||||
angularInit(angularJsConfig(document));
|
angularInit(angularJsConfig(document));
|
||||||
};
|
});
|
||||||
|
|
||||||
})(window, document, window.onload);
|
})(window, document);
|
||||||
|
|
|
||||||
|
|
@ -87,6 +87,19 @@ JQLite.prototype = {
|
||||||
})(this[0]);
|
})(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){
|
bind: function(type, fn){
|
||||||
var self = this,
|
var self = this,
|
||||||
element = self[0],
|
element = self[0],
|
||||||
|
|
|
||||||
|
|
@ -21,5 +21,5 @@
|
||||||
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
||||||
* THE SOFTWARE.
|
* THE SOFTWARE.
|
||||||
*/
|
*/
|
||||||
(function(window, document, previousOnLoad){
|
(function(window, document){
|
||||||
var _jQuery = window.jQuery.noConflict(true);
|
var _jQuery = window.jQuery.noConflict(true);
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,7 @@
|
||||||
var $scenario = new angular.scenario.Runner(window);
|
var $scenario = new angular.scenario.Runner(window);
|
||||||
|
|
||||||
window.onload = function() {
|
jqLite(document).ready(function() {
|
||||||
try {
|
|
||||||
if (previousOnLoad) previousOnLoad();
|
|
||||||
} catch(e) {}
|
|
||||||
angularScenarioInit($scenario, angularJsConfig(document));
|
angularScenarioInit($scenario, angularJsConfig(document));
|
||||||
};
|
});
|
||||||
|
|
||||||
})(window, document, window.onload);
|
})(window, document);
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue