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');