The following content represents a basic overview of this page's script structure and [intended] execution flow. When a particular script is mentioned below, it is linked to the "debug" version, as a convenient reference, but the page actually uses the minified versions when available. For a better (more reliable?) explanation of this page's loading behavior, re-run the WebPagetest.org results. ==>
init-b.js is hard-coded in the page's <head> section. This is the only hard-coded <script> element in this document; the other scripts are dynamically appended to the <head>.
<head>
<meta charset="utf-8" />
<title>Page B</title>
<link type="text/css" rel="stylesheet" href="css/style.css" />
<script type="text/javascript" src="js/init-b.js"></script>
</head>
init-b.js has two main sections of code:
lazyFunction(), which is attached to the window.load event.
Neither dependencies ( require.deps ) nor a callback function ( require.callback ) are defined in the require global object's configuration. It does, however, define a shim configuration for sammy.js.
(function() {
require = {
// ...
// callback: undefined
// deps: undefined
shim: {
'sammy': {
deps: ['jquery'],
exports: 'Sammy'
}
}
};
}());
lazyFunction() & Attach to window.load
require.js is dynamically loaded by lazyFunction() after the window.load event. The data-main attribute is set to main-b.js, which tells require.js to load it next (i.e., as soon as require.js is done loading).
var lazyFunction = function() {
var s = document.createElement('script');
s.type = 'text/javascript';
s.src = 'lib/require/require.js';
s.setAttribute('data-main', 'app/main-b');
document.getElementsByTagName('head')[0].appendChild(s);
}
window.onload = function() {
lazyFunction();
}
Fork this demo on github.