|
0
|
1 |
|
|
|
2 |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> |
|
|
3 |
<html> |
|
|
4 |
<head> |
|
|
5 |
<title>YUI Library Examples: ImageLoader: Basic Features of the ImageLoader Utility</title> |
|
|
6 |
<meta http-equiv="content-type" content="text/html; charset=utf-8"> |
|
|
7 |
<link rel="stylesheet" type="text/css" href="../../assets/yui.css" > |
|
|
8 |
|
|
|
9 |
<style> |
|
|
10 |
/*Supplemental CSS for the YUI distribution*/ |
|
|
11 |
#custom-doc { width: 95%; min-width: 950px; } |
|
|
12 |
#pagetitle {background-image: url(../../assets/bg_hd.gif);} |
|
|
13 |
/* #pagetitle h1 {background-image: url(../../assets/title_h_bg.gif);}*/ |
|
|
14 |
</style> |
|
|
15 |
|
|
|
16 |
<link rel="stylesheet" type="text/css" href="../../assets/dpSyntaxHighlighter.css"> |
|
|
17 |
|
|
|
18 |
<!--there is no custom header content for this example--> |
|
|
19 |
|
|
|
20 |
<link type="text/css" rel="stylesheet" href="../../build/cssfonts/fonts-min.css" /> |
|
|
21 |
<script type="text/javascript" src="../../build/yui/yui-debug.js"></script> |
|
|
22 |
|
|
|
23 |
</head> |
|
|
24 |
<body id="yahoo-com" class=" yui-skin-sam"> |
|
|
25 |
<div id="custom-doc" class="yui-t2"> |
|
|
26 |
<div id="hd"> |
|
|
27 |
<div id="ygunav"> |
|
|
28 |
<p> |
|
|
29 |
<em> |
|
|
30 |
<a href="http://developer.yahoo.com/yui/3/">YUI 3.x Home</a> <i> - </i> |
|
|
31 |
</em> |
|
|
32 |
</p> |
|
|
33 |
<form action="http://search.yahoo.com/search" id="sitesearchform"> |
|
|
34 |
<input name="vs" type="hidden" value="developer.yahoo.com"> |
|
|
35 |
<input name="vs" type="hidden" value="yuiblog.com"> |
|
|
36 |
<div id="sitesearch"> |
|
|
37 |
<label for="searchinput">Site Search (YDN & YUIBlog): </label> |
|
|
38 |
<input type="text" id="searchinput" name="p"> |
|
|
39 |
<input type="submit" value="Search" id="searchsubmit" class="ygbt"> |
|
|
40 |
</div> |
|
|
41 |
</form> |
|
|
42 |
</div> |
|
|
43 |
<div id="ygma"><a href="../../"><img src="../../assets/logo.gif" border="0" width="200" height="93"></a></div> |
|
|
44 |
<div id="pagetitle"><h1>YUI Library Examples: ImageLoader: Basic Features of the ImageLoader Utility</h1></div> |
|
|
45 |
</div> |
|
|
46 |
<div id="bd"> |
|
|
47 |
|
|
|
48 |
<div id="bar-note"><p><strong>Note:</strong> This is YUI 3.x. Looking for <a href="http://developer.yahoo.com/yui/">YUI 2.x</a>?</p></div> |
|
|
49 |
|
|
|
50 |
<div id="yui-main"> |
|
|
51 |
<div class="yui-b"> |
|
|
52 |
<div class="yui-ge"> |
|
|
53 |
<div class="yui-u first example" id="main"> |
|
|
54 |
|
|
|
55 |
<h2>ImageLoader: Basic Features of the ImageLoader Utility</h2> |
|
|
56 |
|
|
|
57 |
<div id="example" class="promo"> |
|
|
58 |
<p> |
|
|
59 |
<p>Displayed here are the basic abilities of the <a href="http://developer.yahoo.com/yui/imageloader/">ImageLoader Utility</a>. Images are loaded only after triggers are fired or time limits are reached.</p> |
|
|
60 |
|
|
|
61 |
<p>Hover over each image to show its triggers and its time limit. Try tripping the triggers to see the load reactions. Refresh the page to reset the images.</p> |
|
|
62 |
|
|
|
63 |
</p> |
|
|
64 |
|
|
|
65 |
<div class="module example-container "> |
|
|
66 |
<div class="hd exampleHd"> |
|
|
67 |
<p class="newWindowButton yui-skin-sam"> |
|
|
68 |
<a href="imageloader-basics_clean.html" target="_blank">View example in new window.</a> |
|
|
69 |
</p> |
|
|
70 |
</div> <div id="example-canvas" class="bd"> |
|
|
71 |
|
|
|
72 |
|
|
|
73 |
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== --> |
|
|
74 |
|
|
|
75 |
<style> |
|
|
76 |
|
|
|
77 |
.everything { position:relative; height:420px; } |
|
|
78 |
.everything div { border:1px solid #888; } |
|
|
79 |
.topmain { position:absolute; top:10px; left:120px; height:75px; width:100px; } |
|
|
80 |
.duo1 { position:absolute; top:130px; left:20px; height:67px; width:100px; } |
|
|
81 |
.duo2 { position:absolute; top:130px; left:220px; height:53px; width:100px; } |
|
|
82 |
.png { position:absolute; top:240px; left:140px; height:34px; width:61px; } |
|
|
83 |
.scroll { position:absolute; top:320px; left:120px; height:72px; width:100px; } |
|
|
84 |
|
|
|
85 |
</style> |
|
|
86 |
|
|
|
87 |
|
|
|
88 |
<div class='everything' id='everything'> |
|
|
89 |
<div class='topmain' id='topmain' title='group 1; mouse over image; 2 sec limit'></div> |
|
|
90 |
<div class='duo1' id='duo1' title='group 2; mouse over left image, or click on right image; 4 sec limit'></div> |
|
|
91 |
<div class='duo2' id='duo2' title='group 2; mouse over left image, or click on right image; 4 sec limit'></div> |
|
|
92 |
<div class='png' id='pngimg' title='group 3; no trigger; 5 sec limit'></div> |
|
|
93 |
<div class='scroll' title='group 4; scroll; no time limit'> |
|
|
94 |
<img id='scrollImg' style='visibility:hidden;' /> |
|
|
95 |
</div> |
|
|
96 |
</div> |
|
|
97 |
|
|
|
98 |
|
|
|
99 |
<script> |
|
|
100 |
|
|
|
101 |
YUI({base:"../../build/", timeout: 10000, filter:"debug", logInclude: {imageloader:true, example:true}}).use("imageloader", function(Y) { |
|
|
102 |
|
|
|
103 |
var mainGroup = new Y.ImgLoadGroup({ name: 'group 1', timeLimit: 2 }); |
|
|
104 |
mainGroup.addTrigger('#topmain', 'mouseover'); |
|
|
105 |
mainGroup.registerImage({ domId: 'topmain', bgUrl: 'http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small/museum.jpg' }); |
|
|
106 |
|
|
|
107 |
var duoGroup = new Y.ImgLoadGroup({ name: 'group 2', timeLimit: 4 }); |
|
|
108 |
duoGroup.addTrigger('#duo1', 'mouseover').addTrigger('#duo2', 'click'); |
|
|
109 |
duoGroup.registerImage({ domId: 'duo1', bgUrl: 'http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small/uluru.jpg' }); |
|
|
110 |
duoGroup.registerImage({ domId: 'duo2', bgUrl: 'http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small/katatjuta.jpg' }); |
|
|
111 |
|
|
|
112 |
var pngGroup = new Y.ImgLoadGroup({ name: 'group 3', timeLimit: 5 }); |
|
|
113 |
pngGroup.registerImage({ domId: 'pngimg', bgUrl: 'http://l.yimg.com/a/i/us/nws/weather/gr/47s.png', isPng: true }); |
|
|
114 |
|
|
|
115 |
var scrollGroup = new Y.ImgLoadGroup({ name: 'group 4' }); |
|
|
116 |
scrollGroup.addTrigger(window, 'scroll'); |
|
|
117 |
scrollGroup.registerImage({ domId: 'scrollImg', srcUrl: 'http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small/morraine.jpg', setVisible: true }); |
|
|
118 |
|
|
|
119 |
}); |
|
|
120 |
|
|
|
121 |
</script> |
|
|
122 |
|
|
|
123 |
<!--END SOURCE CODE FOR EXAMPLE =============================== --> |
|
|
124 |
|
|
|
125 |
|
|
|
126 |
</div> |
|
|
127 |
</div> |
|
|
128 |
</div> |
|
|
129 |
|
|
|
130 |
<h2 class='first'>Basic Features of the ImageLoader Utility</h2> |
|
|
131 |
|
|
|
132 |
<p>The ImageLoader Utility allows you to define the conditions under which images are loaded into the page. This example demonstrates attaching some simple triggers to images to establish this load control.</p> |
|
|
133 |
|
|
|
134 |
<p>The HTML used for the image needs little to no modification. Simply make sure the image elements have <code>id</code> attributes, eliminate the <code>src</code> attribute from <code><img></code> elements, and optionally declare <code><img></code> elements as having hidden visibility.</p> |
|
|
135 |
|
|
|
136 |
<textarea name='code' class='HTML' cols='60' rows='1'> |
|
|
137 |
<div class='everything' id='everything'> |
|
|
138 |
<div class='topmain' id='topmain'></div> |
|
|
139 |
<div class='duo1' id='duo1'></div> |
|
|
140 |
<div class='duo2' id='duo2'></div> |
|
|
141 |
<div class='png' id='pngimg'></div> |
|
|
142 |
<div class='scroll'> |
|
|
143 |
<img id='scrollImg' style='visibility:hidden;' /> |
|
|
144 |
</div> |
|
|
145 |
</div> |
|
|
146 |
</textarea> |
|
|
147 |
|
|
|
148 |
<p>In JavaScript, create one ImageLoader group for each set of images and register each image with the group. Let's step through the groups one by one.</p> |
|
|
149 |
|
|
|
150 |
<p>Starting with the architectural image at the top. We set a <code>mouseover</code> of the image itself as a trigger, and a 2-second time limit.</p> |
|
|
151 |
|
|
|
152 |
<textarea name='code' class='JScript' cols='60' rows='1'> |
|
|
153 |
var mainGroup = new Y.ImgLoadGroup({ name: 'group 1', timeLimit: 2 }); |
|
|
154 |
mainGroup.addTrigger('#topmain', 'mouseover'); |
|
|
155 |
mainGroup.registerImage({ domId: 'topmain', bgUrl: 'http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small/museum.jpg' }); |
|
|
156 |
</textarea> |
|
|
157 |
|
|
|
158 |
<p>The second group has two images, and also two triggers. As triggers, we have a <code>mouseover</code> of the left image and a <code>click</code> on the right image.</p> |
|
|
159 |
|
|
|
160 |
<textarea name='code' class='JScript' cols='60' rows='1'> |
|
|
161 |
var duoGroup = new Y.ImgLoadGroup({ name: 'group 2', timeLimit: 4 }); |
|
|
162 |
duoGroup.addTrigger('#duo1', 'mouseover').addTrigger('#duo2', 'click'); |
|
|
163 |
duoGroup.registerImage({ domId: 'duo1', bgUrl: 'http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small/uluru.jpg' }); |
|
|
164 |
duoGroup.registerImage({ domId: 'duo2', bgUrl: 'http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small/katatjuta.jpg' }); |
|
|
165 |
</textarea> |
|
|
166 |
|
|
|
167 |
<p>The third group has no trigger; the only thing that will load the image is its time limit of 5 seconds.</p> |
|
|
168 |
|
|
|
169 |
<textarea name='code' class='JScript' cols='60' rows='1'> |
|
|
170 |
var pngGroup = new Y.ImgLoadGroup({ name: 'group 3', timeLimit: 5 }); |
|
|
171 |
pngGroup.registerImage({ domId: 'pngimg', bgUrl: 'http://l.yimg.com/a/i/us/nws/weather/gr/47s.png', isPng: true }); |
|
|
172 |
</textarea> |
|
|
173 |
|
|
|
174 |
<p>In the last group, we have an image loaded by the window's <code>scroll</code> event. Since this is an <code><img></code> element, we omit the <code>src</code> attribute. Also, we'll set the visibility to hidden to avoid a broken image icon. (Our other option is to use a transparent image as the source, but the tradeoff is the load burden of this additional image.) Because we've hidden the image, we need to make sure it gets changed to visible via the <code>setVisible</code> flag. This group has no time limit, so the only thing that will load the image is its <code>scroll</code> trigger.</p> |
|
|
175 |
|
|
|
176 |
<textarea name='code' class='JScript' cols='60' rows='1'> |
|
|
177 |
var scrollGroup = new Y.ImgLoadGroup({ name: 'group 4' }); |
|
|
178 |
scrollGroup.addTrigger(window, 'scroll'); |
|
|
179 |
scrollGroup.registerImage({ domId: 'scrollImg', srcUrl: 'http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small/morraine.jpg', setVisible: true }); |
|
|
180 |
</textarea> |
|
|
181 |
|
|
|
182 |
</div> |
|
|
183 |
<div class="yui-u sidebar"> |
|
|
184 |
|
|
|
185 |
|
|
|
186 |
<div id="examples" class="mod box4"> |
|
|
187 |
<div class="hd"> |
|
|
188 |
<h4> |
|
|
189 |
ImageLoader Examples:</h4> |
|
|
190 |
</div> |
|
|
191 |
<div class="bd"> |
|
|
192 |
<ul> |
|
|
193 |
<li class='selected'><a href='../imageloader/imageloader-basics.html'>Basic Features of the ImageLoader Utility</a></li><li><a href='../imageloader/imageloader-fold.html'>Loading Images Below the Fold</a></li><li><a href='../imageloader/imageloader-class.html'>Using ImageLoader with CSS Class Names</a></li> </ul> |
|
|
194 |
</div> |
|
|
195 |
</div> |
|
|
196 |
|
|
|
197 |
<div class="mod box4"> |
|
|
198 |
<div class="hd"> |
|
|
199 |
<h4>More ImageLoader Resources:</h4> |
|
|
200 |
</div> |
|
|
201 |
<div class="bd"> |
|
|
202 |
<ul> |
|
|
203 |
<!-- <li><a href="http://developer.yahoo.com/yui/imageloader/">User's Guide</a> (external)</li> --> |
|
|
204 |
<li><a href="../../api/module_imageloader.html">API Documentation</a></li> |
|
|
205 |
</ul> |
|
|
206 |
</div> |
|
|
207 |
</div> |
|
|
208 |
</div> |
|
|
209 |
</div> |
|
|
210 |
|
|
|
211 |
</div> |
|
|
212 |
</div> |
|
|
213 |
|
|
|
214 |
|
|
|
215 |
<div class="yui-b toc3" id="tocWrapper"> |
|
|
216 |
<!-- TABLE OF CONTENTS --> |
|
|
217 |
<div id="toc"> |
|
|
218 |
|
|
|
219 |
<ul> |
|
|
220 |
<li class="sect first">YUI 3.x Project</li><li class="item"><a title="The Yahoo! User Interface (YUI) Library, 3.x Branch, " href="http://developer.yahoo.com/yui/3/">YUI 3 Web Site (external)</a></li><li class="item"><a title="Examples of every YUI utility and control in action" href="../../examples/">YUI 3 Examples</a></li><li class="item"><a title="Instantly searchable API documentation for the entire YUI library." href="../../api/">YUI 3 API Docs</a></li><li class="item"><a title="The YUI Library can be downloaded from SourceForge" href="http://sourceforge.net/projects/yui/">YUI 3 on Sourceforge (external)</a></li><li class="item"><a title="YUI is free and open, offered under a BSD license." href="http://developer.yahoo.com/yui/3/license.html">YUI License (external)</a></li><li class="sect">YUI 3 Core - Examples</li><li class="item"><a title="YUI (Global Prerequisite) - Functional Examples" href="../../examples/yui/index.html">YUI (Global Prerequisite)</a></li><li class="item"><a title="Event - Functional Examples" href="../../examples/event/index.html">Event</a></li><li class="item"><a title="Node - Functional Examples" href="../../examples/node/index.html">Node</a></li><li class="sect">YUI 3 Component Infrastructure - Examples</li><li class="item"><a title="Attribute - Functional Examples" href="../../examples/attribute/index.html">Attribute</a></li><li class="item"><a title="Plugin - Functional Examples" href="../../examples/plugin/index.html">Plugin</a></li><li class="item"><a title="Widget - Functional Examples" href="../../examples/widget/index.html">Widget</a></li><li class="sect">YUI 3 Utilities - Examples</li><li class="item"><a title="Animation - Functional Examples" href="../../examples/anim/index.html">Animation</a></li><li class="item"><a title="Cache - Functional Examples" href="../../examples/cache/index.html">Cache</a></li><li class="item"><a title="Cookie - Functional Examples" href="../../examples/cookie/index.html">Cookie</a></li><li class="item"><a title="DataSchema - Functional Examples" href="../../examples/dataschema/index.html">DataSchema</a></li><li class="item"><a title="DataSource - Functional Examples" href="../../examples/datasource/index.html">DataSource</a></li><li class="item"><a title="DataType - Functional Examples" href="../../examples/datatype/index.html">DataType</a></li><li class="item"><a title="Drag & Drop - Functional Examples" href="../../examples/dd/index.html">Drag & Drop</a></li><li class="item"><a title="Get - Functional Examples" href="../../examples/get/index.html">Get</a></li><li class="item"><a title="History - Functional Examples" href="../../examples/history/index.html">History</a></li><li class="selected "><a title="ImageLoader - Functional Examples" href="../../examples/imageloader/index.html">ImageLoader</a></li><li class="item"><a title="IO - Functional Examples" href="../../examples/io/index.html">IO</a></li><li class="item"><a title="JSON (JavaScript Object Notation) - Functional Examples" href="../../examples/json/index.html">JSON</a></li><li class="item"><a title="Queue - Functional Examples" href="../../examples/queue/index.html">Queue</a></li><li class="item"><a title="Stylesheet - Functional Examples" href="../../examples/stylesheet/index.html">Stylesheet</a></li><li class="sect">YUI 3 Widgets - Examples</li><li class="item"><a title="Overlay - Functional Examples" href="../../examples/overlay/index.html">Overlay</a></li><li class="item"><a title="Slider - Functional Examples" href="../../examples/slider/index.html">Slider</a></li><li class="sect">YUI 3 Node Plugins - Examples</li><li class="item"><a title="FocusManager Node Plugin - Functional Examples" href="../../examples/node-focusmanager/index.html">FocusManager Node Plugin</a></li><li class="item"><a title="MenuNav Node Plugin - Functional Examples" href="../../examples/node-menunav/index.html">MenuNav Node Plugin</a></li><li class="sect">YUI 3 CSS - Examples</li><li class="item"><a title="YUI CSS Reset - Functional Examples" href="../../examples/cssreset/index.html">CSS Reset</a></li><li class="item"><a title="YUI Fonts - Functional Examples" href="../../examples/cssfonts/index.html">CSS Fonts</a></li><li class="item"><a title="YUI Base - Functional Examples" href="../../examples/cssbase/index.html">CSS Base</a></li><li class="sect">YUI 3 Developer Tools - Examples</li><li class="item"><a title="Console - Functional Examples" href="../../examples/console/index.html">Console</a></li><li class="item"><a title="Profiler - Functional Examples" href="../../examples/profiler/index.html">Profiler</a></li><li class="item"><a title="Test - Functional Examples" href="../../examples/test/index.html">Test</a></li><li class="sect">The YUI Community</li><li class="item"><a title="The Yahoo! User Interface Blog" href="http://yuiblog.com">YUI Blog (external)</a></li><li class="item"><a title="The Yahoo! Group YDN-JavaScript hosts the YUI community forum" href="http://tech.groups.yahoo.com/group/ydn-javascript/">YUI Forum (external)</a></li><li class="item"><a title="The Yahoo! Group yui3 is dedicated to the 3.x branch of the Yahoo! User Interface (YUI) Library." href="http://tech.groups.yahoo.com/group/yui3/">YUI 3 Forum (external)</a></li><li class="item"><a title="YUI is used by Yahoo! and by hundreds of other sites, including many you know and love." href="/yui/poweredby/">YUI Sightings (external)</a></li><li class="item"><a title="Videos and podcasts from the YUI Team and from the Yahoo! frontend engineering community." href="http://developer.yahoo.com/yui/theater/">YUI Theater (external)</a></li><li class="sect">YUI Articles on the YUI Website</li><li class="item"><a title="Answers to Frequently Asked Questions about the YUI Library" href="http://developer.yahoo.com/yui/articles/faq/">YUI FAQ (external)</a></li><li class="item"><a title="Yahoo!'s philosophy of Graded Browser Support" href="http://developer.yahoo.com/yui/articles/gbs/">Graded Browser Support (external)</a></li><li class="item"><a title="Reporting Bugs and Making Feature Requests for YUI Components" href="http://developer.yahoo.com/yui/articles/reportingbugs/">Bug Reports/Feature Requests (external)</a></li><li class="item"><a title="Serve YUI source files from Yahoo! -- free, fast, and simple" href="http://developer.yahoo.com/yui/3/articles/hosting/">Serving YUI Files from Yahoo! (external)</a></li></ul> |
|
|
221 |
</div> |
|
|
222 |
</div> |
|
|
223 |
</div><!--closes bd--> |
|
|
224 |
|
|
|
225 |
<div id="ft"> |
|
|
226 |
<p class="first">Copyright © 2009 Yahoo! Inc. All rights reserved.</p> |
|
|
227 |
<p><a href="http://privacy.yahoo.com/privacy/us/devel/index.html">Privacy Policy</a> - |
|
|
228 |
<a href="http://docs.yahoo.com/info/terms/">Terms of Service</a> - |
|
|
229 |
<a href="http://docs.yahoo.com/info/copyright/copyright.html">Copyright Policy</a> - |
|
|
230 |
<a href="http://careers.yahoo.com/">Job Openings</a></p> |
|
|
231 |
</div> |
|
|
232 |
</div> |
|
|
233 |
<script src="../../assets/dpSyntaxHighlighter.js"></script> |
|
|
234 |
<script language="javascript"> |
|
|
235 |
dp.SyntaxHighlighter.HighlightAll('code'); |
|
|
236 |
</script> |
|
|
237 |
</body> |
|
|
238 |
</html> |