← Back to branch summary

~ubuntu-branches/ubuntu/raring/maas/raring-updates

« back to all changes in this revision

Viewing changes to src/maasserver/static/jslibs/yui/3.4.1/docs/imageloader/below-fold.html

  • Committer: Package Import Robot
  • Author(s): Andres Rodriguez
  • Date: 2012-07-03 17:42:37 UTC
  • mfrom: (1.1.13)
  • Revision ID: package-import@ubuntu.com-20120703174237-p8l0keuuznfg721k
Tags: 0.1+bzr709+dfsg-0ubuntu1
* New Upstream release
* debian/control:
  - Depends on python-celery, python-tempita, libjs-yui3-{full,min},
    libjs-raphael
* debian/maas.install:
  - Install apiclient, celeryconfig.py, maas-import-pxe-files, preseeds_v2.
  - Update to install various files from chroot, rather tha manually copy
    them from the source.
* debian/maas.links: symlink celeryconfig.py
* debian/maas.maas-celery.upstart: Add job.
* debian/rules:
  - Install celery upstart job.
  - Do not install jslibs as packages are now used.
  - Drop copying of maas_local_settings_sample.py as source now ships
    a maas_local_settings.py
* debian/patches:
  - 04-maas-http-fix.patch: Drop. Merged upstream.
  - 01-fix-database-settings.patch: Refreshed.
  - 99_enums_js.patch: Added until creation of enum.js / build process
    is fixed.
* debian/maas.postinst: Update bzr version to correctly handle upgrades.

Show diffs side-by-side

added added

removed removed

Lines of Context:
src/maasserver/static/jslibs/yui/3.4.1/docs/imageloader/below-fold.html
1
 
<!DOCTYPE html>
2
 
<html lang="en">
3
 
<head>
4
 
    <meta charset="utf-8">
5
 
    <title>Example: Loading Images Below the Fold</title>
6
 
    <link rel="stylesheet" href="http://yui.yahooapis.com/3.4.0pr3/build/cssgrids/grids-min.css">
7
 
    <link rel="stylesheet" href="../assets/css/main.css">
8
 
    <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
9
 
    <script src="../../build/yui/yui-min.js"></script>
10
 
</head>
11
 
<body>
12
 
 
13
 
<div id="doc">
14
 
    <h1>Example: Loading Images Below the Fold</h1>
15
 
 
16
 
    
17
 
 
18
 
    <div class="yui3-g">
19
 
        <div id="main" class="yui3-u">
20
 
            <div class="content"><div class="intro">
21
 
 
22
 
  <p>
23
 
    Often pages will have a number of images below the fold, hidden from the user's view. 
24
 
    These are prime candidates to load with the <a href="http://developer.yahoo.com/yui/imageloader/">ImageLoader Utility</a>.
25
 
  </p>
26
 
 
27
 
  <p>
28
 
    All the images in this example belong to the same group, and each loads immediately only when it appears above, 
29
 
    or within the specified distance (25px) of, the page fold.
30
 
  </p>
31
 
 
32
 
</div>
33
 
 
34
 
<div class="example">
35
 
  <!--BEGIN SOURCE CODE FOR EXAMPLE ===============================-->
36
 
 
37
 
  <style>
38
 
  .everything .cont { border:1px solid #888; width:100px; margin:75px 50px; }
39
 
  .everything .rightCol { margin-left:300px; }
40
 
  #img1Cont { height:75px; margin-top:25px; }
41
 
  #img2Cont { height:67px; }
42
 
  #img3Cont { height:53px; }
43
 
  #img4Cont { height:72px; }
44
 
  #img5Cont { height:75px; margin-bottom:25px; }
45
 
  </style>
46
 
 
47
 
 
48
 
  <div class='everything' id='everything'>
49
 
        <div class='cont' id='img1Cont'>
50
 
                <img id='img1' />
51
 
        </div>
52
 
        <div class='cont rightCol' id='img2Cont'>
53
 
                <img id='img2' />
54
 
        </div>
55
 
        <div class='cont' id='img3Cont'>
56
 
                <img id='img3' />
57
 
 
58
 
        </div>
59
 
        <div class='cont rightCol' id='img4Cont'>
60
 
                <img id='img4' />
61
 
        </div>
62
 
        <div class='cont' id='img5Cont'>
63
 
                <img id='img5' />
64
 
        </div>
65
 
  </div>
66
 
 
67
 
 
68
 
  <script>
69
 
 
70
 
  YUI({filter:"debug", logInclude: {"imageloader":true, "example":true}}).use("imageloader", function(Y) {
71
 
 
72
 
        var foldGroup = new Y.ImgLoadGroup({ name: 'fold group', foldDistance: 25 });
73
 
        foldGroup.registerImage({ domId: 'img1', srcUrl: 'http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small/museum.jpg' });
74
 
        foldGroup.registerImage({ domId: 'img2', srcUrl: 'http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small/uluru.jpg' });
75
 
        foldGroup.registerImage({ domId: 'img3', srcUrl: 'http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small/katatjuta.jpg' });
76
 
        foldGroup.registerImage({ domId: 'img4', srcUrl: 'http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small/morraine.jpg' });
77
 
        foldGroup.registerImage({ domId: 'img5', srcUrl: 'http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small/japan.jpg' });
78
 
 
79
 
  /*
80
 
  var foldGroup = new YAHOO.util.ImageLoader.group(window, 'scroll');
81
 
  foldGroup.foldConditional = true;
82
 
  //foldGroup.addTrigger(window, 'resize');
83
 
  foldGroup.name = 'fold_group';
84
 
  */
85
 
 
86
 
  /*
87
 
   * This uncustomary wait before adding the resize trigger is done specifically to cater to IE for this example.
88
 
   * In IE and with the Logger enabled, IE fires an immediate resize event while rendering the Logger module, consequently loading all the images in the example.
89
 
   * This 200 ms delay allows IE to render the Logger without interference.
90
 
   * In your code, you would add the resize trigger in a straightforward fashion, as is documented in the example.
91
 
   */
92
 
  //YAHOO.util.Event.addListener(window, 'load', function() { setTimeout("foldGroup.addTrigger(window, 'resize')", 200); });
93
 
 
94
 
  });
95
 
 
96
 
  </script>
97
 
 
98
 
  <!--END SOURCE CODE FOR EXAMPLE =============================== -->
99
 
 
100
 
</div>
101
 
 
102
 
<h2>Loading Images Below the Fold</h2>
103
 
 
104
 
<p>
105
 
  You can easily have images load immediately if they are above the fold while delaying the load of images below the fold. 
106
 
  This saves you from loading any images that the user can't see because they are beyond her browser's viewable area.
107
 
</p>
108
 
 
109
 
<p>
110
 
  All we need is one group, and we specify its <code>foldDistance</code> attribute to <code>25</code> (25px). 
111
 
  Any group with this attribute set will, at the DOM ready state, examine the page coordinates of all images registered 
112
 
  to that group. Any images located above the fold, or no farther than the specified distance below the fold, will load immediately. 
113
 
  The rest will be checked again at any <code>scroll</code> or <code>resize</code> event and be loaded only when they're near enough 
114
 
  to the fold.
115
 
</p>
116
 
 
117
 
<pre class="code prettyprint">var foldGroup = new Y.ImgLoadGroup({ name: &#x27;fold group&#x27;, foldDistance: 25 });
118
 
foldGroup.registerImage({ domId: &#x27;img1&#x27;, srcUrl: &#x27;http:&#x2F;&#x2F;developer.yahoo.com&#x2F;yui&#x2F;docs&#x2F;assets&#x2F;examples&#x2F;exampleimages&#x2F;small&#x2F;museum.jpg&#x27; });
119
 
foldGroup.registerImage({ domId: &#x27;img2&#x27;, srcUrl: &#x27;http:&#x2F;&#x2F;developer.yahoo.com&#x2F;yui&#x2F;docs&#x2F;assets&#x2F;examples&#x2F;exampleimages&#x2F;small&#x2F;uluru.jpg&#x27; });
120
 
foldGroup.registerImage({ domId: &#x27;img3&#x27;, srcUrl: &#x27;http:&#x2F;&#x2F;developer.yahoo.com&#x2F;yui&#x2F;docs&#x2F;assets&#x2F;examples&#x2F;exampleimages&#x2F;small&#x2F;katatjuta.jpg&#x27; });
121
 
foldGroup.registerImage({ domId: &#x27;img4&#x27;, srcUrl: &#x27;http:&#x2F;&#x2F;developer.yahoo.com&#x2F;yui&#x2F;docs&#x2F;assets&#x2F;examples&#x2F;exampleimages&#x2F;small&#x2F;morraine.jpg&#x27; });
122
 
foldGroup.registerImage({ domId: &#x27;img5&#x27;, srcUrl: &#x27;http:&#x2F;&#x2F;developer.yahoo.com&#x2F;yui&#x2F;docs&#x2F;assets&#x2F;examples&#x2F;exampleimages&#x2F;small&#x2F;japan.jpg&#x27; });</pre>
123
 
 
124
 
 
125
 
<p>
126
 
  When you specify a <code>foldDistance</code> value, <code>scroll</code> and <code>resize</code> triggers are added to the 
127
 
  group automatically. Thus you will typically not need to set any triggers for the group explicitly.
128
 
</p>
129
 
 
130
 
<p>
131
 
  How do you know that the images below the fold are, in fact, not loaded immediately? There are several tools available to 
132
 
  monitor the HTTP requests of your browser, including Firebug for Firefox and HTTPWatch for IE. With these tools you can 
133
 
  monitor precisely when each image on a page is loaded.
134
 
</p>
135
 
</div>
136
 
        </div>
137
 
 
138
 
        <div id="sidebar" class="yui3-u">
139
 
            
140
 
 
141
 
            
142
 
                <div class="sidebox">
143
 
                    <div class="hd">
144
 
                        <h2 class="no-toc">Examples</h2>
145
 
                    </div>
146
 
 
147
 
                    <div class="bd">
148
 
                        <ul class="examples">
149
 
                            
150
 
                                
151
 
                                    <li data-description="Demonstrates the basic features and operation of the ImageLoader Utility, deferring the loading of images until specific events happen or specific time limits expire.">
152
 
                                        <a href="basic-features.html">Basic Features of the ImageLoader Utility</a>
153
 
                                    </li>
154
 
                                
155
 
                            
156
 
                                
157
 
                                    <li data-description="Loading images above the fold immediately while deferring the loading of images below the fold.">
158
 
                                        <a href="below-fold.html">Loading Images Below the Fold</a>
159
 
                                    </li>
160
 
                                
161
 
                            
162
 
                                
163
 
                                    <li data-description="Using CSS class names to target specific images for deferred loading.">
164
 
                                        <a href="imageloader-class-names.html">Using ImageLoader with CSS Class Names</a>
165
 
                                    </li>
166
 
                                
167
 
                            
168
 
                        </ul>
169
 
                    </div>
170
 
                </div>
171
 
            
172
 
 
173
 
            
174
 
        </div>
175
 
    </div>
176
 
</div>
177
 
 
178
 
<script src="../assets/vendor/prettify/prettify-min.js"></script>
179
 
<script>prettyPrint();</script>
180
 
 
181
 
</body>
182
 
</html>