YUI Library: ImageLoader Utility 2008-2-19 v2.

5
Simple Use Case: ImageLoader Group Object ImageLoader Objects: Members YAHOO.util.ImageLoader.
See online docs for complete details on members. group Methods:
Create a YAHOO.util.ImageLoader.group object with a
YAHOO.util.ImageLoader.group addTrigger(obj domObject or str
trigger and time limit. Then register images with the group: domElementId, str eventAction)
Member Type Description adds a trigger event
//group with ‘someDivId’ click trigger & 2 sec limit: addCustomTrigger(obj
var myGroup = new YAHOO.util.ImageLoader.group('someDi timeoutLen number Length of time limit, in seconds. Also the third
YAHOO.util.CustomEvent
vId', 'click', 2); argument in the constructor. object) adds a custom event trigger
myGroup.registerBgImage('imgDivId', 'http://some.image foldConditional boolean Flag to check if images are above the fold. registerBgImage(str imgElId, str
/url'); url) adds a background-type image to
className string CSS class name that will identify images the group returns
This will cause imgDivId's background image to load either belonging to the group. YAHOO.util.ImageLoader.imgObj
registerSrcImage(str imgElId, str
when someDivId is clicked or two seconds after page load, name string Optional. Only used to identify the group in url, [int width, int height]) adds a
whichever comes first. Logger Control logging statements. source-type image to the group;
optional width and height resize the
addTrigger method Adds a trigger to the group. image to those constraints returns
Constructor: ImageLoader Group Object addCustomTrigger method Adds a custom event trigger to the group.
YAHOO.util.ImageLoader.imgObj
registerPngBgImage(str imgElId,
YAHOO.util.ImageLoader.group([obj triggerElement, str registerBgImage method Registers a background image with the group. str url, [obj ailProps]) adds a png-
triggerAction, int timeLimit]) background-type image to the group;
registerSrcImage method Registers a src image with the group. optional properties to set
Arguments: AlphaImageLoader properties returns
registerPngBgImage method Registers an alpha-channel-type png YAHOO.util.ImageLoader.imgObj
(1) triggerElement: The object of the trigger event. Can be a background image with the group.
DOM id or object.
(2) triggerAction: The action of the trigger event.
YAHOO.util.ImageLoader.imgObj Dependencies
triggerElement and triggerAction are optional (can be Member Type Description
The YUI ImageLoader
null). But if one is supplied, the other must be as well. setVisible boolean Whether the style.visibility should be set to Utility requires the Yahoo
(3) timeLimit: Maximum time to wait for the trigger event to be “visible” after the image is fetched. Global Object, Dom
fired. width number Size to set as width of image after image is Collection, and Event Utility.
fetched. Only applies to source-type images.
ImageLoader Image Registration Third argument in group’s registerSrcImage
method.
Source images (e.g., an <img> element):
myGroup.registerSrcImage(‘imgImgId’, height number Size to set as height of image after image is
‘http://some.image/url’); fetched. Only applies to source-type images.
Fourth argument in group’s registerSrcImage
Background images (e.g., a <div> element with a background image): method.
myGroup.registerBgImage(‘imgDivId’,
‘http://some.image/url’);
Solution: Image Loading with Class Names
PNG background images (e.g., a <div> element with a PNG bg image):
myGroup.registerPngBgImage(‘imgDivId’, Set up the CSS, HTML, and JavaScript for delayed image loading:
‘http://some.png_image/url’);
/* set an overriding background:none */
.yui-imgload-circle { background:none !important; }
Solution: Simple Image Loading <!-- this div will get the trigger event -->
<div id='circle'>
Set up the HTML and JavaScript for delayed image loading: <!-- set the src to some transparent image, the background-
<div id='square'> image to the true image, and the class to match the CSS -->
<img id='circleImg' src=‘http://some.transparent/image’
<img id='squareImg' /><!-- note no “src” attribute -->
style=‘background-image:url(“http://some.image/url”);’
</div> class=‘yui-imgload-circle’ height=‘20’ width=‘20’ />
// in script, create group and register image </div>
var sqGrp = new YAHOO.util.ImageLoader.group(‘square’,
‘mouseover’, 3); // create group and identify class name
sqGrp.registerSrcImage(‘squareImg’, var circleGroup = new YAHOO.util.ImageLoader.group(‘circle’,
‘http://some.image/url’); ‘mouseover’, 3);
circleGroup.className = ‘yui-imgload-circle’;