-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathpage-c.html
119 lines (104 loc) · 5.02 KB
/
page-c.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<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>
<body>
<div class="app">
<div class="app-title">applicationHost</div>
<div class="page">
<div id="applicationHost"></div>
</div>
</div>
<div class="lazie">
<div class="page">
<div class="primary">
<h1><a href="page-c.html">Page C</a></h1>
<p>
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.  ==>
</p>
<h2>1.  Load <a href="js/init-c.js">init-c.js</a></h2>
<p>
<a href="js/init-c.js">init-c.js</a> is hard-coded in the page's <code><head></code> section. This is the only hard-coded <code><script></code> element in this document; the other scripts are dynamically appended to the <code><head></code>.
</p>
<pre>
<code>
<head>
<meta charset="utf-8" />
<title>Page C</title>
<link type="text/css" rel="stylesheet" href="css/style.css" />
<span class="highlight"><script type="text/javascript" src="js/init-c.js"></script></span>
</head>
</code>
</pre>
<h2>2.  Execute <a href="js/init-c.js">init-c.js</a></h2>
<p>
<a href="js/init-c.js">init-c.js</a> is just like <a href="js/init-b.js">init-b.js</a>, except that it wraps everything in an IIFE.
</p>
<pre>
<code>
<span class="highlight">(function() {</span>
// 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();
}
<span class="highlight">}());</span>
</code>
</pre>
<h2>3.  Load & Execute <a href="lib/require/require.debug.js">require.js</a></h2>
<h2>4.  Load <a href="app/main-c.js">main-c.js</a> and Begin App</h2>
</div>
<div class="secondary">
<h2><a href="http://www.webpagetest.org/">WebPagetest.org</a> Results</h2>
<ul>
<li><a href="http://www.webpagetest.org/result/130414_HH_4BF/">IE6</a></li>
<li><a href="http://www.webpagetest.org/result/130414_MH_HX7/">IE7</a></li>
<li><a href="http://www.webpagetest.org/result/130414_F3_HXB/">IE8</a></li>
<li><a href="http://www.webpagetest.org/result/130414_MW_HXC/">IE9</a></li>
<li><a href="http://www.webpagetest.org/result/130414_VF_4BH/">IE10</a></li>
<li><a href="http://www.webpagetest.org/result/130414_CJ_HXK/">Firefox</a></li>
<li><a href="http://www.webpagetest.org/result/130414_A9_4BS/">Chrome</a></li>
<li><a href="http://www.webpagetest.org/result/130414_4P_HXV/">Safari (Windows)</a></li>
<li><a href="http://www.webpagetest.org/result/130414_8T_HXX/">iOS 5.1 (iPhone 4)</a></li>
<li><a href="http://www.webpagetest.org/result/130414_WZ_HY3/">IE6 + Chrome Frame</a></li>
<li><a href="http://www.webpagetest.org/result/130414_MZ_J0N/">Android 2.1 (Nexus S)</a></li>
</ul>
<h2>Test Pages</h2>
<ul>
<li><a href="page-a.html">Page A</a></li>
<li><a href="page-b.html">Page B</a></li>
<li><a href="page-c.html">Page C</a></li>
<li><a href="page-d.html">Page D</a></li>
</ul>
<h2>Github Repo</h2>
<p>
Fork this demo on <a href="https://github.com/dslatten/lazie">github</a>.
</p>
</div>
<div class="clear"></div>
</div>
</div>
</body>
</html>