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