Group 1: Two second delay

This will appear two seconds after page-load.

HTML

``` ```

JavaScript

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

Group 2: Window scroll event

This will appear when the scroll event is fired.

HTML

``` ```

JavaScript

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

Group 3: Mouse over

This will appear when you mouse over it.

HTML

``` ```

JavaScript

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

Group 4: Onclick

These will appear when either one is clicked.

HTML

``` ```

JavaScript

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