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