|
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> |
|
2 <html xmlns:yui="http://yuilibrary.com/rdf/1.0/yui.rdf#"> |
|
3 <head> |
|
4 <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> |
|
5 <title>API: imageloader imageloader.js (YUI Library)</title> |
|
6 |
|
7 <link rel="stylesheet" type="text/css" href="assets/reset-fonts-grids-min.css" /> |
|
8 <link rel="stylesheet" type="text/css" href="assets/api.css" /> |
|
9 |
|
10 <script type="text/javascript" src="assets/api-js"></script> |
|
11 <script type="text/javascript" src="assets/ac-js"></script> |
|
12 </head> |
|
13 |
|
14 <body id="yahoo-com"> |
|
15 |
|
16 <div id="doc3" class="yui-t2"> |
|
17 <div id="hd"> |
|
18 <h1><a href="http://developer.yahoo.com/yui/" title="Yahoo! UI Library">Yahoo! UI Library</a></h1> |
|
19 <h3>imageloader <span class="subtitle">3.0.0b1</span></h3> |
|
20 <a href="./index.html" title="Yahoo! UI Library">Yahoo! UI Library</a> |
|
21 > <a href="./module_imageloader.html" title="imageloader">imageloader</a> |
|
22 |
|
23 > imageloader.js (source view) |
|
24 <form onsubmit="return false"> |
|
25 <div id="propertysearch"> |
|
26 Search: <input autocomplete="off" id="searchinput" /> |
|
27 <div id="searchresults"> |
|
28 |
|
29 </div> |
|
30 </div> |
|
31 </form> |
|
32 </div> |
|
33 |
|
34 <div id="bd"> |
|
35 <div id="yui-main"> |
|
36 <div class="yui-b"> |
|
37 <form action="#" name="yui-classopts-form" method="get" id="yui-classopts-form"> |
|
38 <fieldset> |
|
39 <legend>Filters</legend> |
|
40 <span class="classopts"><input type="checkbox" name="show_private" id="show_private" /> <label for="show_private">Show Private</label></span> |
|
41 <span class="classopts"><input type="checkbox" name="show_protected" id="show_protected" /> <label for="show_protected">Show Protected</label></span> |
|
42 <span class="classopts"><input type="checkbox" name="show_deprecated" id="show_deprecated" /> <label for="show_deprecated">Show Deprecated</label></span> |
|
43 </fieldset> |
|
44 </form> |
|
45 |
|
46 <div id="srcout"> |
|
47 <style> |
|
48 #doc3 .classopts { display:none; } |
|
49 </style> |
|
50 <div class="highlight" ><pre><span class="c">/**</span> |
|
51 <span class="c"> * The ImageLoader Utility is a framework to dynamically load images according to certain triggers,</span> |
|
52 <span class="c"> * enabling faster load times and a more responsive UI.</span> |
|
53 <span class="c"> *</span> |
|
54 <span class="c"> * @module imageloader</span> |
|
55 <span class="c"> * @requires node</span> |
|
56 <span class="c"> */</span> |
|
57 |
|
58 |
|
59 <span class="c">/**</span> |
|
60 <span class="c"> * A group for images. A group can have one time limit and a series of triggers. Thus the images belonging to this group must share these constraints.</span> |
|
61 <span class="c"> * @class ImgLoadGroup</span> |
|
62 <span class="c"> * @extends Base</span> |
|
63 <span class="c"> * @constructor</span> |
|
64 <span class="c"> */</span> |
|
65 <span class="nx">Y</span><span class="o">.</span><span class="nx">ImgLoadGroup</span> <span class="o">=</span> <span class="k">function</span><span class="o">()</span> <span class="o">{</span> |
|
66 <span class="c">// call init first, because it sets up local vars for storing attribute-related info</span> |
|
67 <span class="c"></span> <span class="k">this</span><span class="o">.</span><span class="nx">_init</span><span class="o">();</span> |
|
68 <span class="nx">Y</span><span class="o">.</span><span class="nx">ImgLoadGroup</span><span class="o">.</span><span class="nx">superclass</span><span class="o">.</span><span class="nx">constructor</span><span class="o">.</span><span class="nx">apply</span><span class="o">(</span><span class="k">this</span><span class="o">,</span> <span class="nx">arguments</span><span class="o">);</span> |
|
69 <span class="o">};</span> |
|
70 |
|
71 <span class="nx">Y</span><span class="o">.</span><span class="nx">ImgLoadGroup</span><span class="o">.</span><span class="nx">NAME</span> <span class="o">=</span> <span class="s1">'imgLoadGroup'</span><span class="o">;</span> |
|
72 |
|
73 <span class="nx">Y</span><span class="o">.</span><span class="nx">ImgLoadGroup</span><span class="o">.</span><span class="nx">ATTRS</span> <span class="o">=</span> <span class="o">{</span> |
|
74 |
|
75 <span class="c">/**</span> |
|
76 <span class="c"> * Name for the group. Only used to identify the group in logging statements.</span> |
|
77 <span class="c"> * @attribute name</span> |
|
78 <span class="c"> * @type String</span> |
|
79 <span class="c"> */</span> |
|
80 <span class="nx">name</span><span class="o">:</span> <span class="o">{</span> |
|
81 <span class="nx">value</span><span class="o">:</span> <span class="s1">''</span> |
|
82 <span class="o">},</span> |
|
83 |
|
84 <span class="c">/**</span> |
|
85 <span class="c"> * Time limit, in seconds, after which images are fetched regardless of trigger events.</span> |
|
86 <span class="c"> * @attribute timeLimit</span> |
|
87 <span class="c"> * @type Number</span> |
|
88 <span class="c"> */</span> |
|
89 <span class="nx">timeLimit</span><span class="o">:</span> <span class="o">{</span> |
|
90 <span class="nx">value</span><span class="o">:</span> <span class="kc">null</span> |
|
91 <span class="o">},</span> |
|
92 |
|
93 <span class="c">/**</span> |
|
94 <span class="c"> * Distance below the fold for which images are loaded. Images are not loaded until they are at most this distance away from (or above) the fold.</span> |
|
95 <span class="c"> * This check is performed at page load (domready) and after any window scroll or window resize event (until all images are loaded).</span> |
|
96 <span class="c"> * @attribute foldDistance</span> |
|
97 <span class="c"> * @type Number</span> |
|
98 <span class="c"> */</span> |
|
99 <span class="nx">foldDistance</span><span class="o">:</span> <span class="o">{</span> |
|
100 <span class="nx">validator</span><span class="o">:</span> <span class="nx">Y</span><span class="o">.</span><span class="nx">Lang</span><span class="o">.</span><span class="nx">isNumber</span><span class="o">,</span> |
|
101 <span class="nx">setter</span><span class="o">:</span> <span class="k">function</span><span class="o">(</span><span class="nx">val</span><span class="o">)</span> <span class="o">{</span> <span class="k">this</span><span class="o">.</span><span class="nx">_setFoldTriggers</span><span class="o">();</span> <span class="k">return</span> <span class="nx">val</span><span class="o">;</span> <span class="o">},</span> |
|
102 <span class="nx">lazyAdd</span><span class="o">:</span> <span class="kc">false</span> |
|
103 <span class="o">},</span> |
|
104 |
|
105 <span class="c">/**</span> |
|
106 <span class="c"> * Class name that will identify images belonging to the group. This class name will be removed from each element in order to fetch images.</span> |
|
107 <span class="c"> * This class should have, in its CSS style definition, "<code>background:none !important;</code>".</span> |
|
108 <span class="c"> * @attribute className</span> |
|
109 <span class="c"> * @type String</span> |
|
110 <span class="c"> */</span> |
|
111 <span class="nx">className</span><span class="o">:</span> <span class="o">{</span> |
|
112 <span class="nx">value</span><span class="o">:</span> <span class="kc">null</span><span class="o">,</span> |
|
113 <span class="nx">setter</span><span class="o">:</span> <span class="k">function</span><span class="o">(</span><span class="nx">name</span><span class="o">)</span> <span class="o">{</span> <span class="k">this</span><span class="o">.</span><span class="nx">_className</span> <span class="o">=</span> <span class="nx">name</span><span class="o">;</span> <span class="k">return</span> <span class="nx">name</span><span class="o">;</span> <span class="o">},</span> |
|
114 <span class="nx">lazyAdd</span><span class="o">:</span> <span class="kc">false</span> |
|
115 <span class="o">}</span> |
|
116 |
|
117 <span class="o">};</span> |
|
118 |
|
119 <span class="k">var</span> <span class="nx">groupProto</span> <span class="o">=</span> <span class="o">{</span> |
|
120 |
|
121 <span class="c">/**</span> |
|
122 <span class="c"> * Initialize all private members needed for the group.</span> |
|
123 <span class="c"> * @method _init</span> |
|
124 <span class="c"> * @private</span> |
|
125 <span class="c"> */</span> |
|
126 <span class="nx">_init</span><span class="o">:</span> <span class="k">function</span><span class="o">()</span> <span class="o">{</span> |
|
127 |
|
128 <span class="c">/**</span> |
|
129 <span class="c"> * Collection of triggers for this group.</span> |
|
130 <span class="c"> * Keeps track of each trigger's event handle, as returned from <code>Y.on</code>.</span> |
|
131 <span class="c"> * @property _triggers</span> |
|
132 <span class="c"> * @private</span> |
|
133 <span class="c"> * @type Array</span> |
|
134 <span class="c"> */</span> |
|
135 <span class="k">this</span><span class="o">.</span><span class="nx">_triggers</span> <span class="o">=</span> <span class="o">[];</span> |
|
136 |
|
137 <span class="c">/**</span> |
|
138 <span class="c"> * Collection of images (<code>Y.ImgLoadImgObj</code> objects) registered with this group, keyed by DOM id.</span> |
|
139 <span class="c"> * @property _imgObjs</span> |
|
140 <span class="c"> * @private</span> |
|
141 <span class="c"> * @type Object</span> |
|
142 <span class="c"> */</span> |
|
143 <span class="k">this</span><span class="o">.</span><span class="nx">_imgObjs</span> <span class="o">=</span> <span class="o">{};</span> |
|
144 |
|
145 <span class="c">/**</span> |
|
146 <span class="c"> * Timeout object to keep a handle on the time limit.</span> |
|
147 <span class="c"> * @property _timeout</span> |
|
148 <span class="c"> * @private</span> |
|
149 <span class="c"> * @type Object</span> |
|
150 <span class="c"> */</span> |
|
151 <span class="k">this</span><span class="o">.</span><span class="nx">_timeout</span> <span class="o">=</span> <span class="kc">null</span><span class="o">;</span> |
|
152 |
|
153 <span class="c">/**</span> |
|
154 <span class="c"> * DOM elements having the class name that is associated with this group.</span> |
|
155 <span class="c"> * Elements are stored during the <code>_foldCheck</code> function and reused later during any subsequent <code>_foldCheck</code> calls - gives a slight performance improvement when the page fold is repeatedly checked.</span> |
|
156 <span class="c"> * @property _classImageEls</span> |
|
157 <span class="c"> * @private</span> |
|
158 <span class="c"> * @type Array</span> |
|
159 <span class="c"> */</span> |
|
160 <span class="k">this</span><span class="o">.</span><span class="nx">_classImageEls</span> <span class="o">=</span> <span class="kc">null</span><span class="o">;</span> |
|
161 |
|
162 <span class="c">/**</span> |
|
163 <span class="c"> * Keep the CSS class name in a member variable for ease and speed.</span> |
|
164 <span class="c"> * @property _className</span> |
|
165 <span class="c"> * @private</span> |
|
166 <span class="c"> * @type String</span> |
|
167 <span class="c"> */</span> |
|
168 <span class="k">this</span><span class="o">.</span><span class="nx">_className</span> <span class="o">=</span> <span class="kc">null</span><span class="o">;</span> |
|
169 |
|
170 <span class="c">/**</span> |
|
171 <span class="c"> * Boolean tracking whether the window scroll and window resize triggers have been set if this is a fold group.</span> |
|
172 <span class="c"> * @property _areFoldTriggersSet</span> |
|
173 <span class="c"> * @private</span> |
|
174 <span class="c"> * @type Boolean</span> |
|
175 <span class="c"> */</span> |
|
176 <span class="k">this</span><span class="o">.</span><span class="nx">_areFoldTriggersSet</span> <span class="o">=</span> <span class="kc">false</span><span class="o">;</span> |
|
177 |
|
178 <span class="c">/**</span> |
|
179 <span class="c"> * The maximum pixel height of the document that has been made visible.</span> |
|
180 <span class="c"> * During fold checks, if the user scrolls up then there's no need to check for newly exposed images.</span> |
|
181 <span class="c"> * @property _maxKnownHLimit</span> |
|
182 <span class="c"> * @private</span> |
|
183 <span class="c"> * @type Int</span> |
|
184 <span class="c"> */</span> |
|
185 <span class="k">this</span><span class="o">.</span><span class="nx">_maxKnownHLimit</span> <span class="o">=</span> <span class="m">0</span><span class="o">;</span> |
|
186 |
|
187 <span class="c">// add a listener to domready that will start the time limit</span> |
|
188 <span class="c"></span> <span class="nx">Y</span><span class="o">.</span><span class="nx">on</span><span class="o">(</span><span class="s1">'domready'</span><span class="o">,</span> <span class="k">this</span><span class="o">.</span><span class="nx">_onloadTasks</span><span class="o">,</span> <span class="k">this</span><span class="o">);</span> |
|
189 <span class="o">},</span> |
|
190 |
|
191 <span class="c">/**</span> |
|
192 <span class="c"> * Adds a trigger to the group. Arguments are passed to <code>Y.on</code>.</span> |
|
193 <span class="c"> * @method addTrigger</span> |
|
194 <span class="c"> * @chainable</span> |
|
195 <span class="c"> * @param {Object} obj The DOM object to attach the trigger event to</span> |
|
196 <span class="c"> * @param {String} type The event type</span> |
|
197 <span class="c"> */</span> |
|
198 <span class="nx">addTrigger</span><span class="o">:</span> <span class="k">function</span><span class="o">(</span><span class="nx">obj</span><span class="o">,</span> <span class="nx">type</span><span class="o">)</span> <span class="o">{</span> |
|
199 <span class="k">if</span> <span class="o">(!</span> <span class="nx">obj</span> <span class="o">||</span> <span class="o">!</span> <span class="nx">type</span><span class="o">)</span> <span class="o">{</span> |
|
200 <span class="k">return</span> <span class="k">this</span><span class="o">;</span> |
|
201 <span class="o">}</span> |
|
202 |
|
203 <span class="nx">Y</span><span class="o">.</span><span class="nx">log</span><span class="o">(</span><span class="s1">'adding trigger to group: '</span> <span class="o">+</span> <span class="k">this</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="s1">'name'</span><span class="o">),</span> <span class="s1">'info'</span><span class="o">,</span> <span class="s1">'imageloader'</span><span class="o">);</span> |
|
204 |
|
205 <span class="c">/* Need to wrap the fetch function. Event Util can't distinguish prototyped functions of different instantiations.</span> |
|
206 <span class="c"> * Leads to this scenario: groupA and groupZ both have window-scroll triggers. groupZ also has a 2-sec timeout (groupA has no timeout).</span> |
|
207 <span class="c"> * groupZ's timeout fires; we remove the triggers. The detach call finds the first window-scroll event with Y.ILG.p.fetch, which is groupA's. </span> |
|
208 <span class="c"> * groupA's trigger is removed and never fires, leaving images unfetched.</span> |
|
209 <span class="c"> */</span> |
|
210 <span class="k">var</span> <span class="nx">wrappedFetch</span> <span class="o">=</span> <span class="k">function</span><span class="o">()</span> <span class="o">{</span> |
|
211 <span class="k">this</span><span class="o">.</span><span class="nx">fetch</span><span class="o">();</span> |
|
212 <span class="o">};</span> |
|
213 <span class="k">this</span><span class="o">.</span><span class="nx">_triggers</span><span class="o">.</span><span class="nx">push</span><span class="o">(</span> <span class="nx">Y</span><span class="o">.</span><span class="nx">on</span><span class="o">(</span><span class="nx">type</span><span class="o">,</span> <span class="nx">wrappedFetch</span><span class="o">,</span> <span class="nx">obj</span><span class="o">,</span> <span class="k">this</span><span class="o">)</span> <span class="o">);</span> |
|
214 |
|
215 <span class="k">return</span> <span class="k">this</span><span class="o">;</span> |
|
216 <span class="o">},</span> |
|
217 |
|
218 <span class="c">/**</span> |
|
219 <span class="c"> * Adds a custom event trigger to the group.</span> |
|
220 <span class="c"> * @method addCustomTrigger</span> |
|
221 <span class="c"> * @chainable</span> |
|
222 <span class="c"> * @param {String} name The name of the event</span> |
|
223 <span class="c"> * @param {Object} obj The object on which to attach the event. <code>obj</code> is optional - by default the event is attached to the <code>Y</code> instance</span> |
|
224 <span class="c"> */</span> |
|
225 <span class="nx">addCustomTrigger</span><span class="o">:</span> <span class="k">function</span><span class="o">(</span><span class="nx">name</span><span class="o">,</span> <span class="nx">obj</span><span class="o">)</span> <span class="o">{</span> |
|
226 <span class="k">if</span> <span class="o">(!</span> <span class="nx">name</span><span class="o">)</span> <span class="o">{</span> |
|
227 <span class="k">return</span> <span class="k">this</span><span class="o">;</span> |
|
228 <span class="o">}</span> |
|
229 |
|
230 <span class="nx">Y</span><span class="o">.</span><span class="nx">log</span><span class="o">(</span><span class="s1">'adding custom trigger to group: '</span> <span class="o">+</span> <span class="k">this</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="s1">'name'</span><span class="o">),</span> <span class="s1">'info'</span><span class="o">,</span> <span class="s1">'imageloader'</span><span class="o">);</span> |
|
231 |
|
232 <span class="c">// see comment in addTrigger()</span> |
|
233 <span class="c"></span> <span class="k">var</span> <span class="nx">wrappedFetch</span> <span class="o">=</span> <span class="k">function</span><span class="o">()</span> <span class="o">{</span> |
|
234 <span class="k">this</span><span class="o">.</span><span class="nx">fetch</span><span class="o">();</span> |
|
235 <span class="o">};</span> |
|
236 <span class="k">if</span> <span class="o">(</span><span class="nx">Y</span><span class="o">.</span><span class="nx">Lang</span><span class="o">.</span><span class="nx">isUndefined</span><span class="o">(</span><span class="nx">obj</span><span class="o">))</span> <span class="o">{</span> |
|
237 <span class="k">this</span><span class="o">.</span><span class="nx">_triggers</span><span class="o">.</span><span class="nx">push</span><span class="o">(</span> <span class="nx">Y</span><span class="o">.</span><span class="nx">on</span><span class="o">(</span><span class="nx">name</span><span class="o">,</span> <span class="nx">wrappedFetch</span><span class="o">,</span> <span class="k">this</span><span class="o">)</span> <span class="o">);</span> |
|
238 <span class="o">}</span> |
|
239 <span class="k">else</span> <span class="o">{</span> |
|
240 <span class="k">this</span><span class="o">.</span><span class="nx">_triggers</span><span class="o">.</span><span class="nx">push</span><span class="o">(</span> <span class="nx">obj</span><span class="o">.</span><span class="nx">on</span><span class="o">(</span><span class="nx">name</span><span class="o">,</span> <span class="nx">wrappedFetch</span><span class="o">,</span> <span class="k">this</span><span class="o">)</span> <span class="o">);</span> |
|
241 <span class="o">}</span> |
|
242 |
|
243 <span class="k">return</span> <span class="k">this</span><span class="o">;</span> |
|
244 <span class="o">},</span> |
|
245 |
|
246 <span class="c">/**</span> |
|
247 <span class="c"> * Sets the window scroll and window resize triggers for any group that is fold-conditional (i.e., has a fold distance set).</span> |
|
248 <span class="c"> * @method _setFoldTriggers</span> |
|
249 <span class="c"> * @private</span> |
|
250 <span class="c"> */</span> |
|
251 <span class="nx">_setFoldTriggers</span><span class="o">:</span> <span class="k">function</span><span class="o">()</span> <span class="o">{</span> |
|
252 <span class="k">if</span> <span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">_areFoldTriggersSet</span><span class="o">)</span> <span class="o">{</span> |
|
253 <span class="k">return</span><span class="o">;</span> |
|
254 <span class="o">}</span> |
|
255 |
|
256 <span class="nx">Y</span><span class="o">.</span><span class="nx">log</span><span class="o">(</span><span class="s1">'setting window scroll and resize events for group: '</span> <span class="o">+</span> <span class="k">this</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="s1">'name'</span><span class="o">),</span> <span class="s1">'info'</span><span class="o">,</span> <span class="s1">'imageloader'</span><span class="o">);</span> |
|
257 |
|
258 <span class="k">var</span> <span class="nx">wrappedFoldCheck</span> <span class="o">=</span> <span class="k">function</span><span class="o">()</span> <span class="o">{</span> |
|
259 <span class="k">this</span><span class="o">.</span><span class="nx">_foldCheck</span><span class="o">();</span> |
|
260 <span class="o">};</span> |
|
261 <span class="k">this</span><span class="o">.</span><span class="nx">_triggers</span><span class="o">.</span><span class="nx">push</span><span class="o">(</span> <span class="nx">Y</span><span class="o">.</span><span class="nx">on</span><span class="o">(</span><span class="s1">'scroll'</span><span class="o">,</span> <span class="nx">wrappedFoldCheck</span><span class="o">,</span> <span class="nb">window</span><span class="o">,</span> <span class="k">this</span><span class="o">)</span> <span class="o">);</span> |
|
262 <span class="k">this</span><span class="o">.</span><span class="nx">_triggers</span><span class="o">.</span><span class="nx">push</span><span class="o">(</span> <span class="nx">Y</span><span class="o">.</span><span class="nx">on</span><span class="o">(</span><span class="s1">'resize'</span><span class="o">,</span> <span class="nx">wrappedFoldCheck</span><span class="o">,</span> <span class="nb">window</span><span class="o">,</span> <span class="k">this</span><span class="o">)</span> <span class="o">);</span> |
|
263 <span class="k">this</span><span class="o">.</span><span class="nx">_areFoldTriggersSet</span> <span class="o">=</span> <span class="kc">true</span><span class="o">;</span> |
|
264 <span class="o">},</span> |
|
265 |
|
266 <span class="c">/**</span> |
|
267 <span class="c"> * Performs necessary setup at domready time.</span> |
|
268 <span class="c"> * Initiates time limit for group; executes the fold check for the images.</span> |
|
269 <span class="c"> * @method _onloadTasks</span> |
|
270 <span class="c"> * @private</span> |
|
271 <span class="c"> */</span> |
|
272 <span class="nx">_onloadTasks</span><span class="o">:</span> <span class="k">function</span><span class="o">()</span> <span class="o">{</span> |
|
273 <span class="k">var</span> <span class="nx">timeLim</span> <span class="o">=</span> <span class="k">this</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="s1">'timeLimit'</span><span class="o">);</span> |
|
274 <span class="k">if</span> <span class="o">(</span><span class="nx">timeLim</span> <span class="o">&&</span> <span class="nx">timeLim</span> <span class="o">></span> <span class="m">0</span><span class="o">)</span> <span class="o">{</span> |
|
275 <span class="nx">Y</span><span class="o">.</span><span class="nx">log</span><span class="o">(</span><span class="s1">'setting time limit of '</span> <span class="o">+</span> <span class="nx">timeLim</span> <span class="o">+</span> <span class="s1">' seconds for group: '</span> <span class="o">+</span> <span class="k">this</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="s1">'name'</span><span class="o">),</span> <span class="s1">'info'</span><span class="o">,</span> <span class="s1">'imageloader'</span><span class="o">);</span> |
|
276 <span class="k">this</span><span class="o">.</span><span class="nx">_timeout</span> <span class="o">=</span> <span class="nx">setTimeout</span><span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">_getFetchTimeout</span><span class="o">(),</span> <span class="nx">timeLim</span> <span class="o">*</span> <span class="m">1000</span><span class="o">);</span> |
|
277 <span class="o">}</span> |
|
278 |
|
279 <span class="k">if</span> <span class="o">(!</span> <span class="nx">Y</span><span class="o">.</span><span class="nx">Lang</span><span class="o">.</span><span class="nx">isUndefined</span><span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="s1">'foldDistance'</span><span class="o">)))</span> <span class="o">{</span> |
|
280 <span class="k">this</span><span class="o">.</span><span class="nx">_foldCheck</span><span class="o">();</span> |
|
281 <span class="o">}</span> |
|
282 <span class="o">},</span> |
|
283 |
|
284 <span class="c">/**</span> |
|
285 <span class="c"> * Returns the group's <code>fetch</code> method, with the proper closure, for use with <code>setTimeout</code>.</span> |
|
286 <span class="c"> * @method _getFetchTimeout</span> |
|
287 <span class="c"> * @return {Function} group's <code>fetch</code> method</span> |
|
288 <span class="c"> * @private</span> |
|
289 <span class="c"> */</span> |
|
290 <span class="nx">_getFetchTimeout</span><span class="o">:</span> <span class="k">function</span><span class="o">()</span> <span class="o">{</span> |
|
291 <span class="k">var</span> <span class="nx">self</span> <span class="o">=</span> <span class="k">this</span><span class="o">;</span> |
|
292 <span class="k">return</span> <span class="k">function</span><span class="o">()</span> <span class="o">{</span> <span class="nx">self</span><span class="o">.</span><span class="nx">fetch</span><span class="o">();</span> <span class="o">};</span> |
|
293 <span class="o">},</span> |
|
294 |
|
295 <span class="c">/**</span> |
|
296 <span class="c"> * Registers an image with the group.</span> |
|
297 <span class="c"> * Arguments are passed through to a <code>Y.ImgLoadImgObj</code> constructor; see that class' attribute documentation for detailed information. "<code>domId</code>" is a required attribute.</span> |
|
298 <span class="c"> * @method registerImage</span> |
|
299 <span class="c"> * @param {Object} * A configuration object literal with attribute name/value pairs (passed through to a <code>Y.ImgLoadImgObj</code> constructor)</span> |
|
300 <span class="c"> * @return {Object} <code>Y.ImgLoadImgObj</code> that was registered</span> |
|
301 <span class="c"> */</span> |
|
302 <span class="nx">registerImage</span><span class="o">:</span> <span class="k">function</span><span class="o">()</span> <span class="o">{</span> |
|
303 <span class="k">var</span> <span class="nx">domId</span> <span class="o">=</span> <span class="nx">arguments</span><span class="o">[</span><span class="m">0</span><span class="o">].</span><span class="nx">domId</span><span class="o">;</span> |
|
304 <span class="k">if</span> <span class="o">(!</span> <span class="nx">domId</span><span class="o">)</span> <span class="o">{</span> |
|
305 <span class="k">return</span> <span class="kc">null</span><span class="o">;</span> |
|
306 <span class="o">}</span> |
|
307 |
|
308 <span class="nx">Y</span><span class="o">.</span><span class="nx">log</span><span class="o">(</span><span class="s1">'adding image with id: '</span> <span class="o">+</span> <span class="nx">domId</span> <span class="o">+</span> <span class="s1">' to group: '</span> <span class="o">+</span> <span class="k">this</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="s1">'name'</span><span class="o">),</span> <span class="s1">'info'</span><span class="o">,</span> <span class="s1">'imageloader'</span><span class="o">);</span> |
|
309 |
|
310 <span class="k">this</span><span class="o">.</span><span class="nx">_imgObjs</span><span class="o">[</span><span class="nx">domId</span><span class="o">]</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Y</span><span class="o">.</span><span class="nx">ImgLoadImgObj</span><span class="o">(</span><span class="nx">arguments</span><span class="o">[</span><span class="m">0</span><span class="o">]);</span> |
|
311 <span class="k">return</span> <span class="k">this</span><span class="o">.</span><span class="nx">_imgObjs</span><span class="o">[</span><span class="nx">domId</span><span class="o">];</span> |
|
312 <span class="o">},</span> |
|
313 |
|
314 <span class="c">/**</span> |
|
315 <span class="c"> * Displays the images in the group.</span> |
|
316 <span class="c"> * This method is called when a trigger fires or the time limit expires; it shouldn't be called externally, but is not private in the rare event that it needs to be called immediately.</span> |
|
317 <span class="c"> * @method fetch</span> |
|
318 <span class="c"> */</span> |
|
319 <span class="nx">fetch</span><span class="o">:</span> <span class="k">function</span><span class="o">()</span> <span class="o">{</span> |
|
320 <span class="nx">Y</span><span class="o">.</span><span class="nx">log</span><span class="o">(</span><span class="s1">'Fetching images in group: "'</span> <span class="o">+</span> <span class="k">this</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="s1">'name'</span><span class="o">)</span> <span class="o">+</span> <span class="s1">'".'</span><span class="o">,</span> <span class="s1">'info'</span><span class="o">,</span> <span class="s1">'imageloader'</span><span class="o">);</span> |
|
321 |
|
322 <span class="c">// done with the triggers</span> |
|
323 <span class="c"></span> <span class="k">this</span><span class="o">.</span><span class="nx">_clearTriggers</span><span class="o">();</span> |
|
324 |
|
325 <span class="c">// fetch whatever we need to by className</span> |
|
326 <span class="c"></span> <span class="k">this</span><span class="o">.</span><span class="nx">_fetchByClass</span><span class="o">();</span> |
|
327 |
|
328 <span class="c">// fetch registered images</span> |
|
329 <span class="c"></span> <span class="k">for</span> <span class="o">(</span><span class="k">var</span> <span class="nx">id</span> <span class="k">in</span> <span class="k">this</span><span class="o">.</span><span class="nx">_imgObjs</span><span class="o">)</span> <span class="o">{</span> |
|
330 <span class="k">if</span> <span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">_imgObjs</span><span class="o">.</span><span class="nx">hasOwnProperty</span><span class="o">(</span><span class="nx">id</span><span class="o">))</span> <span class="o">{</span> |
|
331 <span class="k">this</span><span class="o">.</span><span class="nx">_imgObjs</span><span class="o">[</span><span class="nx">id</span><span class="o">].</span><span class="nx">fetch</span><span class="o">();</span> |
|
332 <span class="o">}</span> |
|
333 <span class="o">}</span> |
|
334 <span class="o">},</span> |
|
335 |
|
336 <span class="c">/**</span> |
|
337 <span class="c"> * Clears the timeout and all triggers associated with the group.</span> |
|
338 <span class="c"> * @method _clearTriggers</span> |
|
339 <span class="c"> * @private</span> |
|
340 <span class="c"> */</span> |
|
341 <span class="nx">_clearTriggers</span><span class="o">:</span> <span class="k">function</span><span class="o">()</span> <span class="o">{</span> |
|
342 <span class="nx">clearTimeout</span><span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">_timeout</span><span class="o">);</span> |
|
343 <span class="c">// detach all listeners</span> |
|
344 <span class="c"></span> <span class="k">for</span> <span class="o">(</span><span class="k">var</span> <span class="nx">i</span><span class="o">=</span><span class="m">0</span><span class="o">,</span> <span class="nx">len</span> <span class="o">=</span> <span class="k">this</span><span class="o">.</span><span class="nx">_triggers</span><span class="o">.</span><span class="nx">length</span><span class="o">;</span> <span class="nx">i</span> <span class="o"><</span> <span class="nx">len</span><span class="o">;</span> <span class="nx">i</span><span class="o">++)</span> <span class="o">{</span> |
|
345 <span class="k">this</span><span class="o">.</span><span class="nx">_triggers</span><span class="o">[</span><span class="nx">i</span><span class="o">].</span><span class="nx">detach</span><span class="o">();</span> |
|
346 <span class="o">}</span> |
|
347 <span class="o">},</span> |
|
348 |
|
349 <span class="c">/**</span> |
|
350 <span class="c"> * Checks the position of each image in the group. If any part of the image is within the specified distance (<code>foldDistance</code>) of the client viewport, the image is fetched immediately.</span> |
|
351 <span class="c"> * @method _foldCheck</span> |
|
352 <span class="c"> * @private</span> |
|
353 <span class="c"> */</span> |
|
354 <span class="nx">_foldCheck</span><span class="o">:</span> <span class="k">function</span><span class="o">()</span> <span class="o">{</span> |
|
355 <span class="nx">Y</span><span class="o">.</span><span class="nx">log</span><span class="o">(</span><span class="s1">'Checking for images above the fold in group: "'</span> <span class="o">+</span> <span class="k">this</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="s1">'name'</span><span class="o">)</span> <span class="o">+</span> <span class="s1">'"'</span><span class="o">,</span> <span class="s1">'info'</span><span class="o">,</span> <span class="s1">'imageloader'</span><span class="o">);</span> |
|
356 |
|
357 <span class="k">var</span> <span class="nx">allFetched</span> <span class="o">=</span> <span class="kc">true</span><span class="o">,</span> |
|
358 <span class="nx">viewReg</span> <span class="o">=</span> <span class="nx">Y</span><span class="o">.</span><span class="nx">DOM</span><span class="o">.</span><span class="nx">viewportRegion</span><span class="o">(),</span> |
|
359 <span class="nx">hLimit</span> <span class="o">=</span> <span class="nx">viewReg</span><span class="o">.</span><span class="nx">bottom</span> <span class="o">+</span> <span class="k">this</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="s1">'foldDistance'</span><span class="o">),</span> |
|
360 <span class="nx">id</span><span class="o">,</span> <span class="nx">imgFetched</span><span class="o">,</span> <span class="nx">els</span><span class="o">,</span> <span class="nx">i</span><span class="o">,</span> <span class="nx">len</span><span class="o">;</span> |
|
361 |
|
362 <span class="c">// unless we've uncovered new frontiers, there's no need to continue</span> |
|
363 <span class="c"></span> <span class="k">if</span> <span class="o">(</span><span class="nx">hLimit</span> <span class="o"><=</span> <span class="k">this</span><span class="o">.</span><span class="nx">_maxKnownHLimit</span><span class="o">)</span> <span class="o">{</span> |
|
364 <span class="k">return</span><span class="o">;</span> |
|
365 <span class="o">}</span> |
|
366 <span class="k">this</span><span class="o">.</span><span class="nx">_maxKnownHLimit</span> <span class="o">=</span> <span class="nx">hLimit</span><span class="o">;</span> |
|
367 |
|
368 <span class="k">for</span> <span class="o">(</span><span class="nx">id</span> <span class="k">in</span> <span class="k">this</span><span class="o">.</span><span class="nx">_imgObjs</span><span class="o">)</span> <span class="o">{</span> |
|
369 <span class="k">if</span> <span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">_imgObjs</span><span class="o">.</span><span class="nx">hasOwnProperty</span><span class="o">(</span><span class="nx">id</span><span class="o">))</span> <span class="o">{</span> |
|
370 <span class="nx">imgFetched</span> <span class="o">=</span> <span class="k">this</span><span class="o">.</span><span class="nx">_imgObjs</span><span class="o">[</span><span class="nx">id</span><span class="o">].</span><span class="nx">fetch</span><span class="o">(</span><span class="nx">hLimit</span><span class="o">);</span> |
|
371 <span class="nx">allFetched</span> <span class="o">=</span> <span class="nx">allFetched</span> <span class="o">&&</span> <span class="nx">imgFetched</span><span class="o">;</span> |
|
372 <span class="o">}</span> |
|
373 <span class="o">}</span> |
|
374 |
|
375 <span class="c">// and by class</span> |
|
376 <span class="c"></span> <span class="k">if</span> <span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">_className</span><span class="o">)</span> <span class="o">{</span> |
|
377 <span class="k">if</span> <span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">_classImageEls</span> <span class="o">===</span> <span class="kc">null</span><span class="o">)</span> <span class="o">{</span> |
|
378 <span class="c">// get all the relevant elements and store them</span> |
|
379 <span class="c"></span> <span class="k">this</span><span class="o">.</span><span class="nx">_classImageEls</span> <span class="o">=</span> <span class="o">[];</span> |
|
380 <span class="nx">els</span> <span class="o">=</span> <span class="nx">Y</span><span class="o">.</span><span class="nx">all</span><span class="o">(</span><span class="s1">'.'</span> <span class="o">+</span> <span class="k">this</span><span class="o">.</span><span class="nx">_className</span><span class="o">);</span> |
|
381 <span class="nx">els</span><span class="o">.</span><span class="nx">each</span><span class="o">(</span> <span class="k">function</span><span class="o">(</span><span class="nx">node</span><span class="o">)</span> <span class="o">{</span> <span class="k">this</span><span class="o">.</span><span class="nx">_classImageEls</span><span class="o">.</span><span class="nx">push</span><span class="o">(</span> <span class="o">{</span> <span class="nx">el</span><span class="o">:</span> <span class="nx">node</span><span class="o">,</span> <span class="nx">y</span><span class="o">:</span> <span class="nx">node</span><span class="o">.</span><span class="nx">getY</span><span class="o">(),</span> <span class="nx">fetched</span><span class="o">:</span> <span class="kc">false</span> <span class="o">}</span> <span class="o">);</span> <span class="o">},</span> <span class="k">this</span><span class="o">);</span> |
|
382 <span class="o">}</span> |
|
383 <span class="nx">els</span> <span class="o">=</span> <span class="k">this</span><span class="o">.</span><span class="nx">_classImageEls</span><span class="o">;</span> |
|
384 <span class="k">for</span> <span class="o">(</span><span class="nx">i</span><span class="o">=</span><span class="m">0</span><span class="o">,</span> <span class="nx">len</span> <span class="o">=</span> <span class="nx">els</span><span class="o">.</span><span class="nx">length</span><span class="o">;</span> <span class="nx">i</span> <span class="o"><</span> <span class="nx">len</span><span class="o">;</span> <span class="nx">i</span><span class="o">++)</span> <span class="o">{</span> |
|
385 <span class="k">if</span> <span class="o">(</span><span class="nx">els</span><span class="o">[</span><span class="nx">i</span><span class="o">].</span><span class="nx">fetched</span><span class="o">)</span> <span class="o">{</span> |
|
386 <span class="k">continue</span><span class="o">;</span> |
|
387 <span class="o">}</span> |
|
388 <span class="k">if</span> <span class="o">(</span><span class="nx">els</span><span class="o">[</span><span class="nx">i</span><span class="o">].</span><span class="nx">y</span> <span class="o">&&</span> <span class="nx">els</span><span class="o">[</span><span class="nx">i</span><span class="o">].</span><span class="nx">y</span> <span class="o"><=</span> <span class="nx">hLimit</span><span class="o">)</span> <span class="o">{</span> |
|
389 <span class="nx">els</span><span class="o">[</span><span class="nx">i</span><span class="o">].</span><span class="nx">el</span><span class="o">.</span><span class="nx">removeClass</span><span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">_className</span><span class="o">);</span> |
|
390 <span class="nx">els</span><span class="o">[</span><span class="nx">i</span><span class="o">].</span><span class="nx">fetched</span> <span class="o">=</span> <span class="kc">true</span><span class="o">;</span> |
|
391 <span class="nx">Y</span><span class="o">.</span><span class="nx">log</span><span class="o">(</span><span class="s1">'Image with id "'</span> <span class="o">+</span> <span class="nx">els</span><span class="o">[</span><span class="nx">i</span><span class="o">].</span><span class="nx">el</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="s1">'id'</span><span class="o">)</span> <span class="o">+</span> <span class="s1">'" is within distance of the fold. Fetching image. (Image registered by class name with the group - may not have an id.)'</span><span class="o">,</span> <span class="s1">'info'</span><span class="o">,</span> <span class="s1">'imageloader'</span><span class="o">);</span> |
|
392 <span class="o">}</span> |
|
393 <span class="k">else</span> <span class="o">{</span> |
|
394 <span class="nx">allFetched</span> <span class="o">=</span> <span class="kc">false</span><span class="o">;</span> |
|
395 <span class="o">}</span> |
|
396 <span class="o">}</span> |
|
397 <span class="o">}</span> |
|
398 |
|
399 <span class="c">// if allFetched, remove listeners</span> |
|
400 <span class="c"></span> <span class="k">if</span> <span class="o">(</span><span class="nx">allFetched</span><span class="o">)</span> <span class="o">{</span> |
|
401 <span class="nx">Y</span><span class="o">.</span><span class="nx">log</span><span class="o">(</span><span class="s1">'All images fetched; removing listeners for group: "'</span> <span class="o">+</span> <span class="k">this</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="s1">'name'</span><span class="o">)</span> <span class="o">+</span> <span class="s1">'"'</span><span class="o">,</span> <span class="s1">'info'</span><span class="o">,</span> <span class="s1">'imageloader'</span><span class="o">);</span> |
|
402 <span class="k">this</span><span class="o">.</span><span class="nx">_clearTriggers</span><span class="o">();</span> |
|
403 <span class="o">}</span> |
|
404 <span class="o">},</span> |
|
405 |
|
406 <span class="c">/**</span> |
|
407 <span class="c"> * Finds all elements in the DOM with the class name specified in the group. Removes the class from the element in order to let the style definitions trigger the image fetching.</span> |
|
408 <span class="c"> * @method _fetchByClass</span> |
|
409 <span class="c"> * @private</span> |
|
410 <span class="c"> */</span> |
|
411 <span class="nx">_fetchByClass</span><span class="o">:</span> <span class="k">function</span><span class="o">()</span> <span class="o">{</span> |
|
412 <span class="k">if</span> <span class="o">(!</span> <span class="k">this</span><span class="o">.</span><span class="nx">_className</span><span class="o">)</span> <span class="o">{</span> |
|
413 <span class="k">return</span><span class="o">;</span> |
|
414 <span class="o">}</span> |
|
415 |
|
416 <span class="nx">Y</span><span class="o">.</span><span class="nx">log</span><span class="o">(</span><span class="s1">'Fetching all images with class "'</span> <span class="o">+</span> <span class="k">this</span><span class="o">.</span><span class="nx">_className</span> <span class="o">+</span> <span class="s1">'" in group "'</span> <span class="o">+</span> <span class="k">this</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="s1">'name'</span><span class="o">)</span> <span class="o">+</span> <span class="s1">'".'</span><span class="o">,</span> <span class="s1">'info'</span><span class="o">,</span> <span class="s1">'imageloader'</span><span class="o">);</span> |
|
417 |
|
418 <span class="nx">Y</span><span class="o">.</span><span class="nx">all</span><span class="o">(</span><span class="s1">'.'</span> <span class="o">+</span> <span class="k">this</span><span class="o">.</span><span class="nx">_className</span><span class="o">).</span><span class="nx">removeClass</span><span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">_className</span><span class="o">);</span> |
|
419 <span class="o">}</span> |
|
420 |
|
421 <span class="o">};</span> |
|
422 |
|
423 |
|
424 <span class="nx">Y</span><span class="o">.</span><span class="nx">extend</span><span class="o">(</span><span class="nx">Y</span><span class="o">.</span><span class="nx">ImgLoadGroup</span><span class="o">,</span> <span class="nx">Y</span><span class="o">.</span><span class="nx">Base</span><span class="o">,</span> <span class="nx">groupProto</span><span class="o">);</span> |
|
425 |
|
426 |
|
427 <span class="c">//------------------------------------------------</span> |
|
428 <span class="c"></span> |
|
429 |
|
430 <span class="c">/**</span> |
|
431 <span class="c"> * Image objects to be registered with the groups</span> |
|
432 <span class="c"> * @class ImgLoadImgObj</span> |
|
433 <span class="c"> * @extends Base</span> |
|
434 <span class="c"> * @constructor</span> |
|
435 <span class="c"> */</span> |
|
436 <span class="nx">Y</span><span class="o">.</span><span class="nx">ImgLoadImgObj</span> <span class="o">=</span> <span class="k">function</span><span class="o">()</span> <span class="o">{</span> |
|
437 <span class="nx">Y</span><span class="o">.</span><span class="nx">ImgLoadImgObj</span><span class="o">.</span><span class="nx">superclass</span><span class="o">.</span><span class="nx">constructor</span><span class="o">.</span><span class="nx">apply</span><span class="o">(</span><span class="k">this</span><span class="o">,</span> <span class="nx">arguments</span><span class="o">);</span> |
|
438 <span class="k">this</span><span class="o">.</span><span class="nx">_init</span><span class="o">();</span> |
|
439 <span class="o">};</span> |
|
440 |
|
441 <span class="nx">Y</span><span class="o">.</span><span class="nx">ImgLoadImgObj</span><span class="o">.</span><span class="nx">NAME</span> <span class="o">=</span> <span class="s1">'imgLoadImgObj'</span><span class="o">;</span> |
|
442 |
|
443 <span class="nx">Y</span><span class="o">.</span><span class="nx">ImgLoadImgObj</span><span class="o">.</span><span class="nx">ATTRS</span> <span class="o">=</span> <span class="o">{</span> |
|
444 <span class="c">/**</span> |
|
445 <span class="c"> * HTML DOM id of the image element.</span> |
|
446 <span class="c"> * @attribute domId</span> |
|
447 <span class="c"> * @type String</span> |
|
448 <span class="c"> */</span> |
|
449 <span class="nx">domId</span><span class="o">:</span> <span class="o">{</span> |
|
450 <span class="nx">value</span><span class="o">:</span> <span class="kc">null</span><span class="o">,</span> |
|
451 <span class="nx">writeOnce</span><span class="o">:</span> <span class="kc">true</span> |
|
452 <span class="o">},</span> |
|
453 |
|
454 <span class="c">/**</span> |
|
455 <span class="c"> * Background URL for the image.</span> |
|
456 <span class="c"> * For an image whose URL is specified by "<code>background-image</code>" in the element's style.</span> |
|
457 <span class="c"> * @attribute bgUrl</span> |
|
458 <span class="c"> * @type String</span> |
|
459 <span class="c"> */</span> |
|
460 <span class="nx">bgUrl</span><span class="o">:</span> <span class="o">{</span> |
|
461 <span class="nx">value</span><span class="o">:</span> <span class="kc">null</span> |
|
462 <span class="o">},</span> |
|
463 |
|
464 <span class="c">/**</span> |
|
465 <span class="c"> * Source URL for the image.</span> |
|
466 <span class="c"> * For an image whose URL is specified by a "<code>src</code>" attribute in the DOM element.</span> |
|
467 <span class="c"> * @attribute srcUrl</span> |
|
468 <span class="c"> * @type String</span> |
|
469 <span class="c"> */</span> |
|
470 <span class="nx">srcUrl</span><span class="o">:</span> <span class="o">{</span> |
|
471 <span class="nx">value</span><span class="o">:</span> <span class="kc">null</span> |
|
472 <span class="o">},</span> |
|
473 |
|
474 <span class="c">/**</span> |
|
475 <span class="c"> * Pixel width of the image. Will be set as a <code>width</code> attribute on the DOM element after the image is fetched.</span> |
|
476 <span class="c"> * Defaults to the natural width of the image (no <code>width</code> attribute will be set).</span> |
|
477 <span class="c"> * Usually only used with src images.</span> |
|
478 <span class="c"> * @attribute width</span> |
|
479 <span class="c"> * @type Int</span> |
|
480 <span class="c"> */</span> |
|
481 <span class="nx">width</span><span class="o">:</span> <span class="o">{</span> |
|
482 <span class="nx">value</span><span class="o">:</span> <span class="kc">null</span> |
|
483 <span class="o">},</span> |
|
484 |
|
485 <span class="c">/**</span> |
|
486 <span class="c"> * Pixel height of the image. Will be set as a <code>height</code> attribute on the DOM element after the image is fetched.</span> |
|
487 <span class="c"> * Defaults to the natural height of the image (no <code>height</code> attribute will be set).</span> |
|
488 <span class="c"> * Usually only used with src images.</span> |
|
489 <span class="c"> * @attribute height</span> |
|
490 <span class="c"> * @type Int</span> |
|
491 <span class="c"> */</span> |
|
492 <span class="nx">height</span><span class="o">:</span> <span class="o">{</span> |
|
493 <span class="nx">value</span><span class="o">:</span> <span class="kc">null</span> |
|
494 <span class="o">},</span> |
|
495 |
|
496 <span class="c">/**</span> |
|
497 <span class="c"> * Whether the image's <code>style.visibility</code> should be set to <code>visible</code> after the image is fetched.</span> |
|
498 <span class="c"> * Used when setting images as <code>visibility:hidden</code> prior to image fetching.</span> |
|
499 <span class="c"> * @attribute setVisible</span> |
|
500 <span class="c"> * @type Boolean</span> |
|
501 <span class="c"> */</span> |
|
502 <span class="nx">setVisible</span><span class="o">:</span> <span class="o">{</span> |
|
503 <span class="nx">value</span><span class="o">:</span> <span class="kc">false</span> |
|
504 <span class="o">},</span> |
|
505 |
|
506 <span class="c">/**</span> |
|
507 <span class="c"> * Whether the image is a PNG.</span> |
|
508 <span class="c"> * PNG images get special treatment in that the URL is specified through AlphaImageLoader for IE, versions 6 and earlier.</span> |
|
509 <span class="c"> * Only used with background images.</span> |
|
510 <span class="c"> * @attribute isPng</span> |
|
511 <span class="c"> * @type Boolean</span> |
|
512 <span class="c"> */</span> |
|
513 <span class="nx">isPng</span><span class="o">:</span> <span class="o">{</span> |
|
514 <span class="nx">value</span><span class="o">:</span> <span class="kc">false</span> |
|
515 <span class="o">},</span> |
|
516 |
|
517 <span class="c">/**</span> |
|
518 <span class="c"> * AlphaImageLoader <code>sizingMethod</code> property to be set for the image.</span> |
|
519 <span class="c"> * Only set if <code>isPng</code> value for this image is set to <code>true</code>.</span> |
|
520 <span class="c"> * Defaults to <code>scale</code>.</span> |
|
521 <span class="c"> * @attribute sizingMethod</span> |
|
522 <span class="c"> * @type String</span> |
|
523 <span class="c"> */</span> |
|
524 <span class="nx">sizingMethod</span><span class="o">:</span> <span class="o">{</span> |
|
525 <span class="nx">value</span><span class="o">:</span> <span class="s1">'scale'</span> |
|
526 <span class="o">},</span> |
|
527 |
|
528 <span class="c">/**</span> |
|
529 <span class="c"> * AlphaImageLoader <code>enabled</code> property to be set for the image.</span> |
|
530 <span class="c"> * Only set if <code>isPng</code> value for this image is set to <code>true</code>.</span> |
|
531 <span class="c"> * Defaults to <code>true</code>.</span> |
|
532 <span class="c"> * @attribute enabled</span> |
|
533 <span class="c"> * @type String</span> |
|
534 <span class="c"> */</span> |
|
535 <span class="nx">enabled</span><span class="o">:</span> <span class="o">{</span> |
|
536 <span class="nx">value</span><span class="o">:</span> <span class="s1">'true'</span> |
|
537 <span class="o">}</span> |
|
538 |
|
539 <span class="o">};</span> |
|
540 |
|
541 <span class="k">var</span> <span class="nx">imgProto</span> <span class="o">=</span> <span class="o">{</span> |
|
542 |
|
543 <span class="c">/**</span> |
|
544 <span class="c"> * Initialize all private members needed for the group.</span> |
|
545 <span class="c"> * @method _init</span> |
|
546 <span class="c"> * @private</span> |
|
547 <span class="c"> */</span> |
|
548 <span class="nx">_init</span><span class="o">:</span> <span class="k">function</span><span class="o">()</span> <span class="o">{</span> |
|
549 |
|
550 <span class="c">/**</span> |
|
551 <span class="c"> * Whether this image has already been fetched.</span> |
|
552 <span class="c"> * In the case of fold-conditional groups, images won't be fetched twice.</span> |
|
553 <span class="c"> * @property _fetched</span> |
|
554 <span class="c"> * @private</span> |
|
555 <span class="c"> * @type Boolean</span> |
|
556 <span class="c"> */</span> |
|
557 <span class="k">this</span><span class="o">.</span><span class="nx">_fetched</span> <span class="o">=</span> <span class="kc">false</span><span class="o">;</span> |
|
558 |
|
559 <span class="c">/**</span> |
|
560 <span class="c"> * The Node object returned from <code>Y.get</code>, to avoid repeat calls to access the DOM.</span> |
|
561 <span class="c"> * @property _imgEl</span> |
|
562 <span class="c"> * @private</span> |
|
563 <span class="c"> * @type Object</span> |
|
564 <span class="c"> */</span> |
|
565 <span class="k">this</span><span class="o">.</span><span class="nx">_imgEl</span> <span class="o">=</span> <span class="kc">null</span><span class="o">;</span> |
|
566 |
|
567 <span class="c">/**</span> |
|
568 <span class="c"> * The vertical position returned from <code>getY</code>, to avoid repeat calls to access the DOM.</span> |
|
569 <span class="c"> * The Y position is checked only for images registered with fold-conditional groups. The position is checked first at page load (domready)</span> |
|
570 <span class="c"> * and this caching enhancement assumes that the image's vertical position won't change after that first check.</span> |
|
571 <span class="c"> * @property _yPos</span> |
|
572 <span class="c"> * @private</span> |
|
573 <span class="c"> * @type Int</span> |
|
574 <span class="c"> */</span> |
|
575 <span class="k">this</span><span class="o">.</span><span class="nx">_yPos</span> <span class="o">=</span> <span class="kc">null</span><span class="o">;</span> |
|
576 <span class="o">},</span> |
|
577 |
|
578 <span class="c">/**</span> |
|
579 <span class="c"> * Displays the image; puts the URL into the DOM.</span> |
|
580 <span class="c"> * This method shouldn't be called externally, but is not private in the rare event that it needs to be called immediately.</span> |
|
581 <span class="c"> * @method fetch</span> |
|
582 <span class="c"> * @param {Int} withinY The pixel distance from the top of the page, for which if the image lies within, it will be fetched. Undefined indicates that no check should be made, and the image should always be fetched</span> |
|
583 <span class="c"> * @return {Boolean} Whether the image has been fetched (either during this execution or previously)</span> |
|
584 <span class="c"> */</span> |
|
585 <span class="nx">fetch</span><span class="o">:</span> <span class="k">function</span><span class="o">(</span><span class="nx">withinY</span><span class="o">)</span> <span class="o">{</span> |
|
586 <span class="k">if</span> <span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">_fetched</span><span class="o">)</span> <span class="o">{</span> |
|
587 <span class="k">return</span> <span class="kc">true</span><span class="o">;</span> |
|
588 <span class="o">}</span> |
|
589 |
|
590 <span class="k">var</span> <span class="nx">el</span> <span class="o">=</span> <span class="k">this</span><span class="o">.</span><span class="nx">_getImgEl</span><span class="o">(),</span> |
|
591 <span class="nx">yPos</span><span class="o">;</span> |
|
592 <span class="k">if</span> <span class="o">(!</span> <span class="nx">el</span><span class="o">)</span> <span class="o">{</span> |
|
593 <span class="k">return</span> <span class="kc">false</span><span class="o">;</span> |
|
594 <span class="o">}</span> |
|
595 |
|
596 <span class="k">if</span> <span class="o">(</span><span class="nx">withinY</span><span class="o">)</span> <span class="o">{</span> |
|
597 <span class="c">// need a distance check</span> |
|
598 <span class="c"></span> <span class="nx">yPos</span> <span class="o">=</span> <span class="k">this</span><span class="o">.</span><span class="nx">_getYPos</span><span class="o">();</span> |
|
599 <span class="k">if</span> <span class="o">(!</span> <span class="nx">yPos</span> <span class="o">||</span> <span class="nx">yPos</span> <span class="o">></span> <span class="nx">withinY</span><span class="o">)</span> <span class="o">{</span> |
|
600 <span class="k">return</span> <span class="kc">false</span><span class="o">;</span> |
|
601 <span class="o">}</span> |
|
602 <span class="nx">Y</span><span class="o">.</span><span class="nx">log</span><span class="o">(</span><span class="s1">'Image with id "'</span> <span class="o">+</span> <span class="k">this</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="s1">'domId'</span><span class="o">)</span> <span class="o">+</span> <span class="s1">'" is within distance of the fold. Fetching image.'</span><span class="o">,</span> <span class="s1">'info'</span><span class="o">,</span> <span class="s1">'imageloader'</span><span class="o">);</span> |
|
603 <span class="o">}</span> |
|
604 |
|
605 <span class="nx">Y</span><span class="o">.</span><span class="nx">log</span><span class="o">(</span><span class="s1">'Fetching image with id "'</span> <span class="o">+</span> <span class="k">this</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="s1">'domId'</span><span class="o">)</span> <span class="o">+</span> <span class="s1">'".'</span><span class="o">,</span> <span class="s1">'info'</span><span class="o">,</span> <span class="s1">'imageloader'</span><span class="o">);</span> |
|
606 |
|
607 <span class="c">// apply url</span> |
|
608 <span class="c"></span> <span class="k">if</span> <span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="s1">'bgUrl'</span><span class="o">)</span> <span class="o">!==</span> <span class="kc">null</span><span class="o">)</span> <span class="o">{</span> |
|
609 <span class="c">// bg url</span> |
|
610 <span class="c"></span> <span class="k">if</span> <span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="s1">'isPng'</span><span class="o">)</span> <span class="o">&&</span> <span class="nx">Y</span><span class="o">.</span><span class="nx">UA</span><span class="o">.</span><span class="nx">ie</span> <span class="o">&&</span> <span class="nx">Y</span><span class="o">.</span><span class="nx">UA</span><span class="o">.</span><span class="nx">ie</span> <span class="o"><=</span> <span class="m">6</span><span class="o">)</span> <span class="o">{</span> |
|
611 <span class="c">// png for which to apply AlphaImageLoader</span> |
|
612 <span class="c"></span> <span class="nx">el</span><span class="o">.</span><span class="nx">setStyle</span><span class="o">(</span><span class="s1">'filter'</span><span class="o">,</span> <span class="s1">'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="'</span> <span class="o">+</span> <span class="k">this</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="s1">'url'</span><span class="o">)</span> <span class="o">+</span> <span class="s1">'", sizingMethod="'</span> <span class="o">+</span> <span class="k">this</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="s1">'sizingMethod'</span><span class="o">)</span> <span class="o">+</span> <span class="s1">'", enabled="'</span> <span class="o">+</span> <span class="k">this</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="s1">'enabled'</span><span class="o">)</span> <span class="o">+</span> <span class="s1">'")'</span><span class="o">);</span> |
|
613 <span class="o">}</span> |
|
614 <span class="k">else</span> <span class="o">{</span> |
|
615 <span class="c">// regular bg image</span> |
|
616 <span class="c"></span> <span class="nx">el</span><span class="o">.</span><span class="nx">setStyle</span><span class="o">(</span><span class="s1">'backgroundImage'</span><span class="o">,</span> <span class="s2">"url('"</span> <span class="o">+</span> <span class="k">this</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="s1">'bgUrl'</span><span class="o">)</span> <span class="o">+</span> <span class="s2">"')"</span><span class="o">);</span> |
|
617 <span class="o">}</span> |
|
618 <span class="o">}</span> |
|
619 <span class="k">else</span> <span class="k">if</span> <span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="s1">'srcUrl'</span><span class="o">)</span> <span class="o">!==</span> <span class="kc">null</span><span class="o">)</span> <span class="o">{</span> |
|
620 <span class="c">// regular src image</span> |
|
621 <span class="c"></span> <span class="nx">el</span><span class="o">.</span><span class="nx">setAttribute</span><span class="o">(</span><span class="s1">'src'</span><span class="o">,</span> <span class="k">this</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="s1">'srcUrl'</span><span class="o">));</span> |
|
622 <span class="o">}</span> |
|
623 |
|
624 <span class="c">// apply attributes</span> |
|
625 <span class="c"></span> <span class="k">if</span> <span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="s1">'setVisible'</span><span class="o">))</span> <span class="o">{</span> |
|
626 <span class="nx">el</span><span class="o">.</span><span class="nx">setStyle</span><span class="o">(</span><span class="s1">'visibility'</span><span class="o">,</span> <span class="s1">'visible'</span><span class="o">);</span> |
|
627 <span class="o">}</span> |
|
628 <span class="k">if</span> <span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="s1">'width'</span><span class="o">))</span> <span class="o">{</span> |
|
629 <span class="nx">el</span><span class="o">.</span><span class="nx">setAttribute</span><span class="o">(</span><span class="s1">'width'</span><span class="o">,</span> <span class="k">this</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="s1">'width'</span><span class="o">));</span> |
|
630 <span class="o">}</span> |
|
631 <span class="k">if</span> <span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="s1">'height'</span><span class="o">))</span> <span class="o">{</span> |
|
632 <span class="nx">el</span><span class="o">.</span><span class="nx">setAttribute</span><span class="o">(</span><span class="s1">'height'</span><span class="o">,</span> <span class="k">this</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="s1">'height'</span><span class="o">));</span> |
|
633 <span class="o">}</span> |
|
634 |
|
635 <span class="k">this</span><span class="o">.</span><span class="nx">_fetched</span> <span class="o">=</span> <span class="kc">true</span><span class="o">;</span> |
|
636 |
|
637 <span class="k">return</span> <span class="kc">true</span><span class="o">;</span> |
|
638 <span class="o">},</span> |
|
639 |
|
640 <span class="c">/**</span> |
|
641 <span class="c"> * Gets the object (as a <code>Y.Node</code>) of the DOM element indicated by "<code>domId</code>".</span> |
|
642 <span class="c"> * @method _getImgEl</span> |
|
643 <span class="c"> * @returns {Object} DOM element of the image as a <code>Y.Node</code> object</span> |
|
644 <span class="c"> * @private</span> |
|
645 <span class="c"> */</span> |
|
646 <span class="nx">_getImgEl</span><span class="o">:</span> <span class="k">function</span><span class="o">()</span> <span class="o">{</span> |
|
647 <span class="k">if</span> <span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">_imgEl</span> <span class="o">===</span> <span class="kc">null</span><span class="o">)</span> <span class="o">{</span> |
|
648 <span class="k">this</span><span class="o">.</span><span class="nx">_imgEl</span> <span class="o">=</span> <span class="nx">Y</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="s1">'#'</span> <span class="o">+</span> <span class="k">this</span><span class="o">.</span><span class="nx">get</span><span class="o">(</span><span class="s1">'domId'</span><span class="o">));</span> |
|
649 <span class="o">}</span> |
|
650 <span class="k">return</span> <span class="k">this</span><span class="o">.</span><span class="nx">_imgEl</span><span class="o">;</span> |
|
651 <span class="o">},</span> |
|
652 |
|
653 <span class="c">/**</span> |
|
654 <span class="c"> * Gets the Y position of the node in page coordinates.</span> |
|
655 <span class="c"> * Expects that the page-coordinate position of the image won't change.</span> |
|
656 <span class="c"> * @method _getYPos</span> |
|
657 <span class="c"> * @returns {Object} The Y position of the image</span> |
|
658 <span class="c"> * @private</span> |
|
659 <span class="c"> */</span> |
|
660 <span class="nx">_getYPos</span><span class="o">:</span> <span class="k">function</span><span class="o">()</span> <span class="o">{</span> |
|
661 <span class="k">if</span> <span class="o">(</span><span class="k">this</span><span class="o">.</span><span class="nx">_yPos</span> <span class="o">===</span> <span class="kc">null</span><span class="o">)</span> <span class="o">{</span> |
|
662 <span class="k">this</span><span class="o">.</span><span class="nx">_yPos</span> <span class="o">=</span> <span class="k">this</span><span class="o">.</span><span class="nx">_getImgEl</span><span class="o">().</span><span class="nx">getY</span><span class="o">();</span> |
|
663 <span class="o">}</span> |
|
664 <span class="k">return</span> <span class="k">this</span><span class="o">.</span><span class="nx">_yPos</span><span class="o">;</span> |
|
665 <span class="o">}</span> |
|
666 |
|
667 <span class="o">};</span> |
|
668 |
|
669 |
|
670 <span class="nx">Y</span><span class="o">.</span><span class="nx">extend</span><span class="o">(</span><span class="nx">Y</span><span class="o">.</span><span class="nx">ImgLoadImgObj</span><span class="o">,</span> <span class="nx">Y</span><span class="o">.</span><span class="nx">Base</span><span class="o">,</span> <span class="nx">imgProto</span><span class="o">);</span> |
|
671 </pre></div> |
|
672 </div> |
|
673 </div> |
|
674 </div> |
|
675 <div class="yui-b"> |
|
676 <div class="nav"> |
|
677 |
|
678 <div id="moduleList" class="module"> |
|
679 <h4>Modules</h4> |
|
680 <ul class="content"> |
|
681 <li class=""><a href="module_anim.html" title="anim">anim</a></li> |
|
682 <li class=""><a href="module_attribute.html" title="attribute">attribute</a></li> |
|
683 <li class=""><a href="module_base.html" title="base">base</a></li> |
|
684 <li class=""><a href="module_cache.html" title="cache">cache</a></li> |
|
685 <li class=""><a href="module_classnamemanager.html" title="classnamemanager">classnamemanager</a></li> |
|
686 <li class=""><a href="module_collection.html" title="collection">collection</a></li> |
|
687 <li class=""><a href="module_console.html" title="console">console</a></li> |
|
688 <li class=""><a href="module_console-filters.html" title="console-filters">console-filters</a></li> |
|
689 <li class=""><a href="module_cookie.html" title="cookie">cookie</a></li> |
|
690 <li class=""><a href="module_dataschema.html" title="dataschema">dataschema</a></li> |
|
691 <li class=""><a href="module_datasource.html" title="datasource">datasource</a></li> |
|
692 <li class=""><a href="module_datatype.html" title="datatype">datatype</a></li> |
|
693 <li class=""><a href="module_dd.html" title="dd">dd</a></li> |
|
694 <li class=""><a href="module_dom.html" title="dom">dom</a></li> |
|
695 <li class=""><a href="module_dump.html" title="dump">dump</a></li> |
|
696 <li class=""><a href="module_event.html" title="event">event</a></li> |
|
697 <li class=""><a href="module_event-custom.html" title="event-custom">event-custom</a></li> |
|
698 <li class=""><a href="module_event-simulate.html" title="event-simulate">event-simulate</a></li> |
|
699 <li class=""><a href="module_history.html" title="history">history</a></li> |
|
700 <li class="selected"><a href="module_imageloader.html" title="imageloader">imageloader</a></li> |
|
701 <li class=""><a href="module_io.html" title="io">io</a></li> |
|
702 <li class=""><a href="module_json.html" title="json">json</a></li> |
|
703 <li class=""><a href="module_node.html" title="node">node</a></li> |
|
704 <li class=""><a href="module_node-focusmanager.html" title="node-focusmanager">node-focusmanager</a></li> |
|
705 <li class=""><a href="module_node-menunav.html" title="node-menunav">node-menunav</a></li> |
|
706 <li class=""><a href="module_oop.html" title="oop">oop</a></li> |
|
707 <li class=""><a href="module_overlay.html" title="overlay">overlay</a></li> |
|
708 <li class=""><a href="module_plugin.html" title="plugin">plugin</a></li> |
|
709 <li class=""><a href="module_profiler.html" title="profiler">profiler</a></li> |
|
710 <li class=""><a href="module_queue.html" title="queue">queue</a></li> |
|
711 <li class=""><a href="module_slider.html" title="slider">slider</a></li> |
|
712 <li class=""><a href="module_stylesheet.html" title="stylesheet">stylesheet</a></li> |
|
713 <li class=""><a href="module_substitute.html" title="substitute">substitute</a></li> |
|
714 <li class=""><a href="module_test.html" title="test">test</a></li> |
|
715 <li class=""><a href="module_widget.html" title="widget">widget</a></li> |
|
716 <li class=""><a href="module_widget-position.html" title="widget-position">widget-position</a></li> |
|
717 <li class=""><a href="module_widget-position-ext.html" title="widget-position-ext">widget-position-ext</a></li> |
|
718 <li class=""><a href="module_widget-stack.html" title="widget-stack">widget-stack</a></li> |
|
719 <li class=""><a href="module_widget-stdmod.html" title="widget-stdmod">widget-stdmod</a></li> |
|
720 <li class=""><a href="module_yui.html" title="yui">yui</a></li> |
|
721 </ul> |
|
722 </div> |
|
723 |
|
724 <div id="classList" class="module"> |
|
725 <h4>Classes</h4> |
|
726 <ul class="content"> |
|
727 <li class=""><a href="ImgLoadGroup.html" title="ImgLoadGroup">ImgLoadGroup</a></li> |
|
728 <li class=""><a href="ImgLoadImgObj.html" title="ImgLoadImgObj">ImgLoadImgObj</a></li> |
|
729 </ul> |
|
730 </div> |
|
731 |
|
732 <div id="fileList" class="module"> |
|
733 <h4>Files</h4> |
|
734 <ul class="content"> |
|
735 <li class="selected"><a href="imageloader.js.html" title="imageloader.js">imageloader.js</a></li> |
|
736 </ul> |
|
737 </div> |
|
738 |
|
739 |
|
740 |
|
741 |
|
742 |
|
743 </div> |
|
744 </div> |
|
745 </div> |
|
746 <div id="ft"> |
|
747 <hr /> |
|
748 Copyright © 2009 Yahoo! Inc. All rights reserved. |
|
749 </div> |
|
750 </div> |
|
751 <script type="text/javascript"> |
|
752 ALL_YUI_PROPS = [{"access": "", "host": "ImgLoadGroup", "name": "addCustomTrigger", "url": "ImgLoadGroup.html#method_addCustomTrigger", "type": "method"}, {"access": "", "host": "ImgLoadGroup", "name": "addTrigger", "url": "ImgLoadGroup.html#method_addTrigger", "type": "method"}, {"access": "private", "host": "ImgLoadGroup", "name": "_areFoldTriggersSet", "url": "ImgLoadGroup.html#property__areFoldTriggersSet", "type": "property"}, {"access": "", "host": "ImgLoadImgObj", "name": "bgUrl", "url": "ImgLoadImgObj.html#config_bgUrl", "type": "config"}, {"access": "", "host": "ImgLoadImgObj", "name": "bgUrlChange", "url": "ImgLoadImgObj.html#event_bgUrlChange", "type": "event"}, {"access": "private", "host": "ImgLoadGroup", "name": "_classImageEls", "url": "ImgLoadGroup.html#property__classImageEls", "type": "property"}, {"access": "private", "host": "ImgLoadGroup", "name": "_className", "url": "ImgLoadGroup.html#property__className", "type": "property"}, {"access": "", "host": "ImgLoadGroup", "name": "className", "url": "ImgLoadGroup.html#config_className", "type": "config"}, {"access": "", "host": "ImgLoadGroup", "name": "classNameChange", "url": "ImgLoadGroup.html#event_classNameChange", "type": "event"}, {"access": "private", "host": "ImgLoadGroup", "name": "_clearTriggers", "url": "ImgLoadGroup.html#method__clearTriggers", "type": "method"}, {"access": "", "host": "ImgLoadImgObj", "name": "domId", "url": "ImgLoadImgObj.html#config_domId", "type": "config"}, {"access": "", "host": "ImgLoadImgObj", "name": "domIdChange", "url": "ImgLoadImgObj.html#event_domIdChange", "type": "event"}, {"access": "", "host": "ImgLoadImgObj", "name": "enabled", "url": "ImgLoadImgObj.html#config_enabled", "type": "config"}, {"access": "", "host": "ImgLoadImgObj", "name": "enabledChange", "url": "ImgLoadImgObj.html#event_enabledChange", "type": "event"}, {"access": "", "host": "ImgLoadGroup", "name": "fetch", "url": "ImgLoadGroup.html#method_fetch", "type": "method"}, {"access": "", "host": "ImgLoadImgObj", "name": "fetch", "url": "ImgLoadImgObj.html#method_fetch", "type": "method"}, {"access": "private", "host": "ImgLoadGroup", "name": "_fetchByClass", "url": "ImgLoadGroup.html#method__fetchByClass", "type": "method"}, {"access": "private", "host": "ImgLoadImgObj", "name": "_fetched", "url": "ImgLoadImgObj.html#property__fetched", "type": "property"}, {"access": "private", "host": "ImgLoadGroup", "name": "_foldCheck", "url": "ImgLoadGroup.html#method__foldCheck", "type": "method"}, {"access": "", "host": "ImgLoadGroup", "name": "foldDistance", "url": "ImgLoadGroup.html#config_foldDistance", "type": "config"}, {"access": "", "host": "ImgLoadGroup", "name": "foldDistanceChange", "url": "ImgLoadGroup.html#event_foldDistanceChange", "type": "event"}, {"access": "private", "host": "ImgLoadGroup", "name": "_getFetchTimeout", "url": "ImgLoadGroup.html#method__getFetchTimeout", "type": "method"}, {"access": "private", "host": "ImgLoadImgObj", "name": "_getImgEl", "url": "ImgLoadImgObj.html#method__getImgEl", "type": "method"}, {"access": "private", "host": "ImgLoadImgObj", "name": "_getYPos", "url": "ImgLoadImgObj.html#method__getYPos", "type": "method"}, {"access": "", "host": "ImgLoadImgObj", "name": "height", "url": "ImgLoadImgObj.html#config_height", "type": "config"}, {"access": "", "host": "ImgLoadImgObj", "name": "heightChange", "url": "ImgLoadImgObj.html#event_heightChange", "type": "event"}, {"access": "private", "host": "ImgLoadImgObj", "name": "_imgEl", "url": "ImgLoadImgObj.html#property__imgEl", "type": "property"}, {"access": "private", "host": "ImgLoadGroup", "name": "_imgObjs", "url": "ImgLoadGroup.html#property__imgObjs", "type": "property"}, {"access": "private", "host": "ImgLoadGroup", "name": "_init", "url": "ImgLoadGroup.html#method__init", "type": "method"}, {"access": "private", "host": "ImgLoadImgObj", "name": "_init", "url": "ImgLoadImgObj.html#method__init", "type": "method"}, {"access": "", "host": "ImgLoadImgObj", "name": "isPng", "url": "ImgLoadImgObj.html#config_isPng", "type": "config"}, {"access": "", "host": "ImgLoadImgObj", "name": "isPngChange", "url": "ImgLoadImgObj.html#event_isPngChange", "type": "event"}, {"access": "private", "host": "ImgLoadGroup", "name": "_maxKnownHLimit", "url": "ImgLoadGroup.html#property__maxKnownHLimit", "type": "property"}, {"access": "", "host": "ImgLoadGroup", "name": "name", "url": "ImgLoadGroup.html#config_name", "type": "config"}, {"access": "", "host": "ImgLoadGroup", "name": "nameChange", "url": "ImgLoadGroup.html#event_nameChange", "type": "event"}, {"access": "private", "host": "ImgLoadGroup", "name": "_onloadTasks", "url": "ImgLoadGroup.html#method__onloadTasks", "type": "method"}, {"access": "", "host": "ImgLoadGroup", "name": "registerImage", "url": "ImgLoadGroup.html#method_registerImage", "type": "method"}, {"access": "private", "host": "ImgLoadGroup", "name": "_setFoldTriggers", "url": "ImgLoadGroup.html#method__setFoldTriggers", "type": "method"}, {"access": "", "host": "ImgLoadImgObj", "name": "setVisible", "url": "ImgLoadImgObj.html#config_setVisible", "type": "config"}, {"access": "", "host": "ImgLoadImgObj", "name": "setVisibleChange", "url": "ImgLoadImgObj.html#event_setVisibleChange", "type": "event"}, {"access": "", "host": "ImgLoadImgObj", "name": "sizingMethod", "url": "ImgLoadImgObj.html#config_sizingMethod", "type": "config"}, {"access": "", "host": "ImgLoadImgObj", "name": "sizingMethodChange", "url": "ImgLoadImgObj.html#event_sizingMethodChange", "type": "event"}, {"access": "", "host": "ImgLoadImgObj", "name": "srcUrl", "url": "ImgLoadImgObj.html#config_srcUrl", "type": "config"}, {"access": "", "host": "ImgLoadImgObj", "name": "srcUrlChange", "url": "ImgLoadImgObj.html#event_srcUrlChange", "type": "event"}, {"access": "", "host": "ImgLoadGroup", "name": "timeLimit", "url": "ImgLoadGroup.html#config_timeLimit", "type": "config"}, {"access": "", "host": "ImgLoadGroup", "name": "timeLimitChange", "url": "ImgLoadGroup.html#event_timeLimitChange", "type": "event"}, {"access": "private", "host": "ImgLoadGroup", "name": "_timeout", "url": "ImgLoadGroup.html#property__timeout", "type": "property"}, {"access": "private", "host": "ImgLoadGroup", "name": "_triggers", "url": "ImgLoadGroup.html#property__triggers", "type": "property"}, {"access": "", "host": "ImgLoadImgObj", "name": "width", "url": "ImgLoadImgObj.html#config_width", "type": "config"}, {"access": "", "host": "ImgLoadImgObj", "name": "widthChange", "url": "ImgLoadImgObj.html#event_widthChange", "type": "event"}, {"access": "private", "host": "ImgLoadImgObj", "name": "_yPos", "url": "ImgLoadImgObj.html#property__yPos", "type": "property"}]; |
|
753 </script> |
|
754 </body> |
|
755 </html> |