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-c.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 C</title>
<link type="text/css" rel="stylesheet" href="css/style.css" />
<script type="text/javascript" src="js/init-c.js"></script>
</head>
init-c.js is just like init-b.js, except that it wraps everything in an IIFE.
(function() {
// Define configuration object for require.js
require = {
// ...
// callback: undefined
// deps: undefined
shim: {
'sammy': {
deps: ['jquery'],
exports: 'Sammy'
}
}
};
// Define a function that will execute on page load
var lazyFunction = function() {
var s = document.createElement('script');
s.type = 'text/javascript';
s.src = 'lib/require/require.js';
s.setAttribute('data-main', 'app/main-c');
document.getElementsByTagName('head')[0].appendChild(s);
}
window.onload = function() {
lazyFunction();
}
}());
Fork this demo on github.