|
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 |
|
|
|
49 |
<div id="yui-main"> |
|
|
50 |
<div class="yui-b"> |
|
|
51 |
<div class="yui-ge"> |
|
|
52 |
<div class="yui-u first example" id="main"> |
|
|
53 |
|
|
|
54 |
<h2>ImageLoader: Basic Features of the ImageLoader Utility</h2> |
|
|
55 |
|
|
|
56 |
<div id="example" class="promo"> |
|
|
57 |
<div class="example-intro"> |
|
|
58 |
<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> |
|
|
59 |
|
|
|
60 |
<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> |
|
|
61 |
|
|
|
62 |
</div> |
|
|
63 |
|
|
|
64 |
<div class="module example-container "> |
|
|
65 |
<div class="hd exampleHd"> |
|
|
66 |
<p class="newWindowButton yui-skin-sam"> |
|
|
67 |
<a href="imageloader-basics_clean.html" target="_blank">View example in new window.</a> |
|
|
68 |
</p> |
|
|
69 |
</div> <div id="example-canvas" class="bd"> |
|
|
70 |
|
|
|
71 |
|
|
|
72 |
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== --> |
|
|
73 |
|
|
|
74 |
<style> |
|
|
75 |
|
|
|
76 |
.everything { position:relative; height:420px; } |
|
|
77 |
.everything div { border:1px solid #888; } |
|
|
78 |
.topmain { position:absolute; top:10px; left:120px; height:75px; width:100px; } |
|
|
79 |
.duo1 { position:absolute; top:130px; left:20px; height:67px; width:100px; } |
|
|
80 |
.duo2 { position:absolute; top:130px; left:220px; height:53px; width:100px; } |
|
|
81 |
.png { position:absolute; top:240px; left:140px; height:34px; width:61px; } |
|
|
82 |
.scroll { position:absolute; top:320px; left:120px; height:72px; width:100px; } |
|
|
83 |
|
|
|
84 |
</style> |
|
|
85 |
|
|
|
86 |
|
|
|
87 |
<div class='everything' id='everything'> |
|
|
88 |
<div class='topmain' id='topmain' title='group 1; mouse over image; 2 sec limit'></div> |
|
|
89 |
<div class='duo1' id='duo1' title='group 2; mouse over left image, or click on right image; 4 sec limit'></div> |
|
|
90 |
<div class='duo2' id='duo2' title='group 2; mouse over left image, or click on right image; 4 sec limit'></div> |
|
|
91 |
<div class='png' id='pngimg' title='group 3; no trigger; 5 sec limit'></div> |
|
|
92 |
<div class='scroll' title='group 4; scroll; no time limit'> |
|
|
93 |
<img id='scrollImg' style='visibility:hidden;' /> |
|
|
94 |
</div> |
|
|
95 |
</div> |
|
|
96 |
|
|
|
97 |
|
|
|
98 |
<script> |
|
|
99 |
|
|
|
100 |
YUI({base:"../../build/", timeout: 10000, filter:"debug", logInclude: {imageloader:true, example:true}}).use("imageloader", function(Y) { |
|
|
101 |
|
|
|
102 |
var mainGroup = new Y.ImgLoadGroup({ name: 'group 1', timeLimit: 2 }); |
|
|
103 |
mainGroup.addTrigger('#topmain', 'mouseover'); |
|
|
104 |
mainGroup.registerImage({ domId: 'topmain', bgUrl: 'http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small/museum.jpg' }); |
|
|
105 |
|
|
|
106 |
var duoGroup = new Y.ImgLoadGroup({ name: 'group 2', timeLimit: 4 }); |
|
|
107 |
duoGroup.addTrigger('#duo1', 'mouseover').addTrigger('#duo2', 'click'); |
|
|
108 |
duoGroup.registerImage({ domId: 'duo1', bgUrl: 'http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small/uluru.jpg' }); |
|
|
109 |
duoGroup.registerImage({ domId: 'duo2', bgUrl: 'http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small/katatjuta.jpg' }); |
|
|
110 |
|
|
|
111 |
var pngGroup = new Y.ImgLoadGroup({ name: 'group 3', timeLimit: 5 }); |
|
|
112 |
pngGroup.registerImage({ domId: 'pngimg', bgUrl: 'http://l.yimg.com/a/i/us/nws/weather/gr/47s.png', isPng: true }); |
|
|
113 |
|
|
|
114 |
var scrollGroup = new Y.ImgLoadGroup({ name: 'group 4' }); |
|
|
115 |
scrollGroup.addTrigger(window, 'scroll'); |
|
|
116 |
scrollGroup.registerImage({ domId: 'scrollImg', srcUrl: 'http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small/morraine.jpg', setVisible: true }); |
|
|
117 |
|
|
|
118 |
}); |
|
|
119 |
|
|
|
120 |
</script> |
|
|
121 |
|
|
|
122 |
<!--END SOURCE CODE FOR EXAMPLE =============================== --> |
|
|
123 |
|
|
|
124 |
|
|
|
125 |
</div> |
|
|
126 |
</div> |
|
|
127 |
</div> |
|
|
128 |
|
|
|
129 |
<h2 class='first'>Basic Features of the ImageLoader Utility</h2> |
|
|
130 |
|
|
|
131 |
<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> |
|
|
132 |
|
|
|
133 |
<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> |
|
|
134 |
|
|
|
135 |
<div id="syntax1" class="yui-syntax-highlight"><div class="numbers"><pre class="html4strict" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="sc2"><<span class="kw2">div</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">'everything'</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">'everything'</span>></span></div></li><li class="li1"><div class="de1"> <span class="sc2"><<span class="kw2">div</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">'topmain'</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">'topmain'</span>><<span class="sy0">/</span><span class="kw2">div</span>></span></div></li><li class="li1"><div class="de1"> <span class="sc2"><<span class="kw2">div</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">'duo1'</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">'duo1'</span>><<span class="sy0">/</span><span class="kw2">div</span>></span></div></li><li class="li1"><div class="de1"> <span class="sc2"><<span class="kw2">div</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">'duo2'</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">'duo2'</span>><<span class="sy0">/</span><span class="kw2">div</span>></span></div></li><li class="li2"><div class="de2"> <span class="sc2"><<span class="kw2">div</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">'png'</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">'pngimg'</span>><<span class="sy0">/</span><span class="kw2">div</span>></span></div></li><li class="li1"><div class="de1"> <span class="sc2"><<span class="kw2">div</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">'scroll'</span>></span></div></li><li class="li1"><div class="de1"> <span class="sc2"><<span class="kw2">img</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">'scrollImg'</span> <span class="kw3">style</span><span class="sy0">=</span><span class="st0">'visibility:hidden;'</span> <span class="sy0">/</span>></span></div></li><li class="li1"><div class="de1"> <span class="sc2"><<span class="sy0">/</span><span class="kw2">div</span>></span></div></li><li class="li1"><div class="de1"><span class="sc2"><<span class="sy0">/</span><span class="kw2">div</span>></span></div></li></ol></pre></div><div class="nonumbers"><pre class="html4strict" style="font-family:monospace;"><span class="sc2"><<span class="kw2">div</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">'everything'</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">'everything'</span>></span> |
|
|
136 |
<span class="sc2"><<span class="kw2">div</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">'topmain'</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">'topmain'</span>><<span class="sy0">/</span><span class="kw2">div</span>></span> |
|
|
137 |
<span class="sc2"><<span class="kw2">div</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">'duo1'</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">'duo1'</span>><<span class="sy0">/</span><span class="kw2">div</span>></span> |
|
|
138 |
<span class="sc2"><<span class="kw2">div</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">'duo2'</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">'duo2'</span>><<span class="sy0">/</span><span class="kw2">div</span>></span> |
|
|
139 |
<span class="sc2"><<span class="kw2">div</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">'png'</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">'pngimg'</span>><<span class="sy0">/</span><span class="kw2">div</span>></span> |
|
|
140 |
<span class="sc2"><<span class="kw2">div</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">'scroll'</span>></span> |
|
|
141 |
<span class="sc2"><<span class="kw2">img</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">'scrollImg'</span> <span class="kw3">style</span><span class="sy0">=</span><span class="st0">'visibility:hidden;'</span> <span class="sy0">/</span>></span> |
|
|
142 |
<span class="sc2"><<span class="sy0">/</span><span class="kw2">div</span>></span> |
|
|
143 |
<span class="sc2"><<span class="sy0">/</span><span class="kw2">div</span>></span></pre></div><textarea id="syntax1-plain"><div class='everything' id='everything'> |
|
|
144 |
<div class='topmain' id='topmain'></div> |
|
|
145 |
<div class='duo1' id='duo1'></div> |
|
|
146 |
<div class='duo2' id='duo2'></div> |
|
|
147 |
<div class='png' id='pngimg'></div> |
|
|
148 |
<div class='scroll'> |
|
|
149 |
<img id='scrollImg' style='visibility:hidden;' /> |
|
|
150 |
</div> |
|
|
151 |
</div></textarea></div> |
|
|
152 |
<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> |
|
|
153 |
|
|
|
154 |
<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> |
|
|
155 |
|
|
|
156 |
<div id="syntax2" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="kw2">var</span> mainGroup <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">ImgLoadGroup</span><span class="br0">(</span><span class="br0">{</span> <span class="kw3">name</span><span class="sy0">:</span> <span class="st0">'group 1'</span><span class="sy0">,</span> timeLimit<span class="sy0">:</span> <span class="nu0">2</span> <span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">mainGroup.<span class="me1">addTrigger</span><span class="br0">(</span><span class="st0">'#topmain'</span><span class="sy0">,</span> <span class="st0">'mouseover'</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">mainGroup.<span class="me1">registerImage</span><span class="br0">(</span><span class="br0">{</span> domId<span class="sy0">:</span> <span class="st0">'topmain'</span><span class="sy0">,</span> bgUrl<span class="sy0">:</span> <span class="st0">'http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small/museum.jpg'</span> <span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;"><span class="kw2">var</span> mainGroup <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">ImgLoadGroup</span><span class="br0">(</span><span class="br0">{</span> <span class="kw3">name</span><span class="sy0">:</span> <span class="st0">'group 1'</span><span class="sy0">,</span> timeLimit<span class="sy0">:</span> <span class="nu0">2</span> <span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
157 |
mainGroup.<span class="me1">addTrigger</span><span class="br0">(</span><span class="st0">'#topmain'</span><span class="sy0">,</span> <span class="st0">'mouseover'</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
158 |
mainGroup.<span class="me1">registerImage</span><span class="br0">(</span><span class="br0">{</span> domId<span class="sy0">:</span> <span class="st0">'topmain'</span><span class="sy0">,</span> bgUrl<span class="sy0">:</span> <span class="st0">'http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small/museum.jpg'</span> <span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></pre></div><textarea id="syntax2-plain">var mainGroup = new Y.ImgLoadGroup({ name: 'group 1', timeLimit: 2 }); |
|
|
159 |
mainGroup.addTrigger('#topmain', 'mouseover'); |
|
|
160 |
mainGroup.registerImage({ domId: 'topmain', bgUrl: 'http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small/museum.jpg' });</textarea></div> |
|
|
161 |
<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> |
|
|
162 |
|
|
|
163 |
<div id="syntax3" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="kw2">var</span> duoGroup <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">ImgLoadGroup</span><span class="br0">(</span><span class="br0">{</span> <span class="kw3">name</span><span class="sy0">:</span> <span class="st0">'group 2'</span><span class="sy0">,</span> timeLimit<span class="sy0">:</span> <span class="nu0">4</span> <span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">duoGroup.<span class="me1">addTrigger</span><span class="br0">(</span><span class="st0">'#duo1'</span><span class="sy0">,</span> <span class="st0">'mouseover'</span><span class="br0">)</span>.<span class="me1">addTrigger</span><span class="br0">(</span><span class="st0">'#duo2'</span><span class="sy0">,</span> <span class="st0">'click'</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">duoGroup.<span class="me1">registerImage</span><span class="br0">(</span><span class="br0">{</span> domId<span class="sy0">:</span> <span class="st0">'duo1'</span><span class="sy0">,</span> bgUrl<span class="sy0">:</span> <span class="st0">'http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small/uluru.jpg'</span> <span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">duoGroup.<span class="me1">registerImage</span><span class="br0">(</span><span class="br0">{</span> domId<span class="sy0">:</span> <span class="st0">'duo2'</span><span class="sy0">,</span> bgUrl<span class="sy0">:</span> <span class="st0">'http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small/katatjuta.jpg'</span> <span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;"><span class="kw2">var</span> duoGroup <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">ImgLoadGroup</span><span class="br0">(</span><span class="br0">{</span> <span class="kw3">name</span><span class="sy0">:</span> <span class="st0">'group 2'</span><span class="sy0">,</span> timeLimit<span class="sy0">:</span> <span class="nu0">4</span> <span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
164 |
duoGroup.<span class="me1">addTrigger</span><span class="br0">(</span><span class="st0">'#duo1'</span><span class="sy0">,</span> <span class="st0">'mouseover'</span><span class="br0">)</span>.<span class="me1">addTrigger</span><span class="br0">(</span><span class="st0">'#duo2'</span><span class="sy0">,</span> <span class="st0">'click'</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
165 |
duoGroup.<span class="me1">registerImage</span><span class="br0">(</span><span class="br0">{</span> domId<span class="sy0">:</span> <span class="st0">'duo1'</span><span class="sy0">,</span> bgUrl<span class="sy0">:</span> <span class="st0">'http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small/uluru.jpg'</span> <span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
166 |
duoGroup.<span class="me1">registerImage</span><span class="br0">(</span><span class="br0">{</span> domId<span class="sy0">:</span> <span class="st0">'duo2'</span><span class="sy0">,</span> bgUrl<span class="sy0">:</span> <span class="st0">'http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small/katatjuta.jpg'</span> <span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></pre></div><textarea id="syntax3-plain">var duoGroup = new Y.ImgLoadGroup({ name: 'group 2', timeLimit: 4 }); |
|
|
167 |
duoGroup.addTrigger('#duo1', 'mouseover').addTrigger('#duo2', 'click'); |
|
|
168 |
duoGroup.registerImage({ domId: 'duo1', bgUrl: 'http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small/uluru.jpg' }); |
|
|
169 |
duoGroup.registerImage({ domId: 'duo2', bgUrl: 'http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small/katatjuta.jpg' });</textarea></div> |
|
|
170 |
<p>The third group has no trigger; the only thing that will load the image is its time limit of 5 seconds.</p> |
|
|
171 |
|
|
|
172 |
<div id="syntax4" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="kw2">var</span> pngGroup <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">ImgLoadGroup</span><span class="br0">(</span><span class="br0">{</span> <span class="kw3">name</span><span class="sy0">:</span> <span class="st0">'group 3'</span><span class="sy0">,</span> timeLimit<span class="sy0">:</span> <span class="nu0">5</span> <span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">pngGroup.<span class="me1">registerImage</span><span class="br0">(</span><span class="br0">{</span> domId<span class="sy0">:</span> <span class="st0">'pngimg'</span><span class="sy0">,</span> bgUrl<span class="sy0">:</span> <span class="st0">'http://l.yimg.com/a/i/us/nws/weather/gr/47s.png'</span><span class="sy0">,</span> isPng<span class="sy0">:</span> <span class="kw2">true</span> <span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;"><span class="kw2">var</span> pngGroup <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">ImgLoadGroup</span><span class="br0">(</span><span class="br0">{</span> <span class="kw3">name</span><span class="sy0">:</span> <span class="st0">'group 3'</span><span class="sy0">,</span> timeLimit<span class="sy0">:</span> <span class="nu0">5</span> <span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
173 |
pngGroup.<span class="me1">registerImage</span><span class="br0">(</span><span class="br0">{</span> domId<span class="sy0">:</span> <span class="st0">'pngimg'</span><span class="sy0">,</span> bgUrl<span class="sy0">:</span> <span class="st0">'http://l.yimg.com/a/i/us/nws/weather/gr/47s.png'</span><span class="sy0">,</span> isPng<span class="sy0">:</span> <span class="kw2">true</span> <span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></pre></div><textarea id="syntax4-plain">var pngGroup = new Y.ImgLoadGroup({ name: 'group 3', timeLimit: 5 }); |
|
|
174 |
pngGroup.registerImage({ domId: 'pngimg', bgUrl: 'http://l.yimg.com/a/i/us/nws/weather/gr/47s.png', isPng: true });</textarea></div> |
|
|
175 |
<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> |
|
|
176 |
|
|
|
177 |
<div id="syntax5" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="kw2">var</span> scrollGroup <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">ImgLoadGroup</span><span class="br0">(</span><span class="br0">{</span> <span class="kw3">name</span><span class="sy0">:</span> <span class="st0">'group 4'</span> <span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">scrollGroup.<span class="me1">addTrigger</span><span class="br0">(</span>window<span class="sy0">,</span> <span class="st0">'scroll'</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">scrollGroup.<span class="me1">registerImage</span><span class="br0">(</span><span class="br0">{</span> domId<span class="sy0">:</span> <span class="st0">'scrollImg'</span><span class="sy0">,</span> srcUrl<span class="sy0">:</span> <span class="st0">'http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small/morraine.jpg'</span><span class="sy0">,</span> setVisible<span class="sy0">:</span> <span class="kw2">true</span> <span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;"><span class="kw2">var</span> scrollGroup <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">ImgLoadGroup</span><span class="br0">(</span><span class="br0">{</span> <span class="kw3">name</span><span class="sy0">:</span> <span class="st0">'group 4'</span> <span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
178 |
scrollGroup.<span class="me1">addTrigger</span><span class="br0">(</span>window<span class="sy0">,</span> <span class="st0">'scroll'</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
179 |
scrollGroup.<span class="me1">registerImage</span><span class="br0">(</span><span class="br0">{</span> domId<span class="sy0">:</span> <span class="st0">'scrollImg'</span><span class="sy0">,</span> srcUrl<span class="sy0">:</span> <span class="st0">'http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small/morraine.jpg'</span><span class="sy0">,</span> setVisible<span class="sy0">:</span> <span class="kw2">true</span> <span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></pre></div><textarea id="syntax5-plain">var scrollGroup = new Y.ImgLoadGroup({ name: 'group 4' }); |
|
|
180 |
scrollGroup.addTrigger(window, 'scroll'); |
|
|
181 |
scrollGroup.registerImage({ domId: 'scrollImg', srcUrl: 'http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small/morraine.jpg', setVisible: true });</textarea></div> </div> |
|
|
182 |
<div class="yui-u sidebar"> |
|
|
183 |
|
|
|
184 |
|
|
|
185 |
<div id="examples" class="mod box4"> |
|
|
186 |
<div class="hd"> |
|
|
187 |
<h4> |
|
|
188 |
ImageLoader Examples:</h4> |
|
|
189 |
</div> |
|
|
190 |
<div class="bd"> |
|
|
191 |
<ul> |
|
|
192 |
<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> |
|
|
193 |
</div> |
|
|
194 |
</div> |
|
|
195 |
|
|
|
196 |
<div class="mod box4"> |
|
|
197 |
<div class="hd"> |
|
|
198 |
<h4>More ImageLoader Resources:</h4> |
|
|
199 |
</div> |
|
|
200 |
<div class="bd"> |
|
|
201 |
<ul> |
|
|
202 |
<!-- <li><a href="http://developer.yahoo.com/yui/imageloader/">User's Guide</a> (external)</li> --> |
|
|
203 |
<li><a href="../../api/module_imageloader.html">API Documentation</a></li></ul> |
|
|
204 |
</div> |
|
|
205 |
</div> |
|
|
206 |
</div> |
|
|
207 |
</div> |
|
|
208 |
|
|
|
209 |
</div> |
|
|
210 |
</div> |
|
|
211 |
|
|
|
212 |
|
|
|
213 |
<div class="yui-b toc3" id="tocWrapper"> |
|
|
214 |
<!-- TABLE OF CONTENTS --> |
|
|
215 |
<div id="toc"> |
|
|
216 |
|
|
|
217 |
<ul> |
|
|
218 |
<li class="sect first">YUI 3 Resources</li><li class="item"><a title="YUI 3 -- Yahoo! User Interface (YUI) Library" href="http://developer.yahoo.com/yui/3/">YUI 3 Web Site</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="YUI 3 Dependency Configurator -- configure your custom YUI implementation" href="http://developer.yahoo.com/yui/3/configurator">YUI 3 Dependency Configurator</a></li><li class="item"><a title="The YUI 3 Forum on YUILibrary.com" href="http://yuilibrary.com/forum/viewforum.php?f=15">YUI 3 Forums (external)</a></li><li class="item"><a title="Found a bug or a missing feature? Let us know on YUILibrary.com." href="http://developer.yahoo.com/yui/articles/reportingbugs/">Bug Reports/Feature Requests</a></li><li class="item"><a title="YUI is free and open, offered under a BSD license." href="http://developer.yahoo.com/yui/license.html">YUI License</a></li><li class="item"><a title="Download and fork the YUI project on GitHub" href="http://github.com/yui">YUI on Github</a></li><li class="item"><a title="The Yahoo! User Interface Blog" href="http://yuiblog.com">YUI Blog (external)</a></li><li class="sect">YUI 3 Core - Examples</li><li class="item"><a title="YUI Global Object - Functional Examples" href="../../examples/yui/index.html">YUI Global Object</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 <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Widget - Functional Examples" href="../../examples/widget/index.html">Widget <img src='http://l.yimg.com/a/i/not/beta_1.gif'></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="AsyncQueue - Functional Examples" href="../../examples/async-queue/index.html">AsyncQueue</a></li><li class="item"><a title="Browser History - Functional Examples" href="../../examples/history/index.html">Browser History</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 <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="DataSource - Functional Examples" href="../../examples/datasource/index.html">DataSource <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="DataType - Functional Examples" href="../../examples/datatype/index.html">DataType <img src='http://l.yimg.com/a/i/not/beta_1.gif'></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="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="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 <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Slider - Functional Examples" href="../../examples/slider/index.html">Slider <img src='http://l.yimg.com/a/i/not/beta_1.gif'></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 <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="MenuNav Node Plugin - Functional Examples" href="../../examples/node-menunav/index.html">MenuNav Node Plugin <img src='http://l.yimg.com/a/i/not/beta_1.gif'></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 <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Console Filters Plugin- Functional Examples" href="../../examples/console-filters/index.html">Plugin.ConsoleFilters <img src='http://l.yimg.com/a/i/not/beta_1.gif'></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">Other Useful YUI 3 Resources</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="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></ul> |
|
|
219 |
</div> |
|
|
220 |
</div> |
|
|
221 |
</div><!--closes bd--> |
|
|
222 |
|
|
|
223 |
<div id="ft"> |
|
|
224 |
<p class="first">Copyright © 2009 Yahoo! Inc. All rights reserved.</p> |
|
|
225 |
<p><a href="http://privacy.yahoo.com/privacy/us/devel/index.html">Privacy Policy</a> - |
|
|
226 |
<a href="http://docs.yahoo.com/info/terms/">Terms of Service</a> - |
|
|
227 |
<a href="http://docs.yahoo.com/info/copyright/copyright.html">Copyright Policy</a> - |
|
|
228 |
<a href="http://careers.yahoo.com/">Job Openings</a></p> |
|
|
229 |
</div> |
|
|
230 |
</div> |
|
|
231 |
<script language="javascript"> |
|
|
232 |
var yuiConfig = {base:"../../build/", timeout: 10000, filter:"debug", logInclude: {imageloader:true, example:true}}; |
|
|
233 |
</script> |
|
|
234 |
<script src="../../assets/syntax.js"></script> |
|
|
235 |
<script src="../../assets/dpSyntaxHighlighter.js"></script> |
|
|
236 |
<script language="javascript"> |
|
|
237 |
dp.SyntaxHighlighter.HighlightAll('code'); |
|
|
238 |
</script> |
|
|
239 |
</body> |
|
|
240 |
</html> |