#

# Example: Basic Features of the ImageLoader Utility

Displayed here are some basic triggers of the ImageLoader Utility. Each image group has an assigned action that will make the group of image(s) appear.

## Group 1: Two second delay

This will appear two seconds after page-load.

##### HTML

    <div id='delay' title='Group 1: 2 sec limit'></div>

##### JavaScript

    var delayGroup = new Y.ImgLoadGroup({ timeLimit: 2 });
    delayGroup.registerImage({ domId: 'delay', bgUrl: '../assets/imageloader/yui-logo.png', isPng: true });

## Group 2: Window scroll event

This will appear when the scroll event is fired.

##### HTML

    <img id='scroll' style='visibility:hidden;' />

##### JavaScript

    var scrollGroup = new Y.ImgLoadGroup();
    scrollGroup.registerImage({ domId: 'scroll', srcUrl: '../assets/imageloader/yui-logo.png', isPng: true, setVisible: true });
    scrollGroup.addTrigger(window, 'scroll');

## Group 3: Mouse over

This will appear when you mouse over it.

##### HTML

    <div id='mouseover' title='Group 3: mouseover'></div>

##### JavaScript

    var mouseoverGroup = new Y.ImgLoadGroup();
    mouseoverGroup.registerImage({ domId: 'scroll', srcUrl: '../assets/imageloader/yui-logo.png', isPng: true, setVisible: true });
    mouseoverGroup.addTrigger(window, 'scroll');

## Group 4: Onclick

These will appear when either one is clicked.

##### HTML

    <div id='duo1' title='Group 4: onclick'></div>
    <div id='duo2' title='Group 4: onclick'></div>

##### JavaScript

    var clickGroup = new Y.ImgLoadGroup();
    clickGroup.registerImage({ domId: 'duo1', bgUrl: '../assets/imageloader/yui-logo.png', isPng: true });
    clickGroup.registerImage({ domId: 'duo2', bgUrl: '../assets/imageloader/yui-logo.png', isPng: true });
    clickGroup.addTrigger('#duo2', 'click').addTrigger('#duo1', 'click');