/
lazy.html
57 lines (57 loc) · 2.1 KB
/
lazy.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
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title>Lazy</title>
</head>
<body data-lift-content-id="main">
<div id="main" data-lift="surround?with=default;at=content">
<p><big><big>Lift has built-in Lazy Loading.</big></big></p>
<p>
</p>
<div data-lift="LazyLoad">
<span data-lift="LongTime"> I started this computation at
<span id="start">start</span> and it
completed at <span id="end">end</span>.
</span>
</div>
<big><big>Notice the spinning icon above this paragraph? That
icon indicates that a computation is going on. The page was
rendered back to the browser and when the computation for that part of
screen real-estate is complete, the HTML will be delivered to the
browser. And, you can have more than one lazy loaded components
on the same page: </big></big><br>
<div data-lift="LazyLoad">
<div data-lift="LongTime"> I started this computation at <span id="start">start</span> and it
completed at <span id="end">end</span>. </div>
</div>
<div>
<big><big>How hard is the code? Here's the display part of the code:</big></big><br>
</div>
<pre data-lift="ShowCode?name=/lazy.html;start=LazyLoad;end=big">view code</pre>
<div>
<big>
<big>
That's not a lot of markup code. Just mark the
block of markup that's going to take a long time to
calculate. Lift takes care of the rest.
Let's look at the <a href="http://stable.simply.liftweb.net/#sec:Snippets">snippet</a> code:
</big>
</big>
</div>
<pre data-lift="ShowCode?name=/net/liftweb/seventhings/snippet/LongTime.scala;start=**">view code</pre>
<div>
<big>
<big>
Most other frameworks don't have lazy loading as part of
the core framework. It's generally very hard to do, but
because Lift has excellent
<span data-lift="Menu.item?name=comet">comet</span>
support, it's easy to "push" content from the
server to the browser.
</big>
</big>
</div>
</div>
</body>
</html>