abf8b2e249b86b7bc5986c3e2478a9ba026b74e6Derek Gathright<div class="intro">
abf8b2e249b86b7bc5986c3e2478a9ba026b74e6Derek Gathright Displayed here are some basic triggers of the ImageLoader Utility.
abf8b2e249b86b7bc5986c3e2478a9ba026b74e6Derek Gathright Each image group has an assigned action that will make the group of image(s) appear.
af1c7fbcbde4a0b9260ae174536ae921c4e07263Derek Gathright #group1, #group2, #group3, #group4 { border-bottom: dotted 2px #ccc;}
abf8b2e249b86b7bc5986c3e2478a9ba026b74e6Derek Gathright .yuiLogo { width:117px; height: 52px; border:1px solid #888; margin:5px;}
2efa5d21c4504f140aae54b5efcf45cedc0efc5aDerek Gathright<div id="group1">
2efa5d21c4504f140aae54b5efcf45cedc0efc5aDerek Gathright <h2>Group 1: Two second delay</h2>
af1c7fbcbde4a0b9260ae174536ae921c4e07263Derek Gathright <p>This will appear two seconds after page-load.</p>
2efa5d21c4504f140aae54b5efcf45cedc0efc5aDerek Gathright <div class='example'>
abf8b2e249b86b7bc5986c3e2478a9ba026b74e6Derek Gathright <div class='yuiLogo' id='delay' title='Group 1: 2 sec limit'></div>
af1c7fbcbde4a0b9260ae174536ae921c4e07263Derek Gathright <h5>HTML</h5>
af1c7fbcbde4a0b9260ae174536ae921c4e07263Derek Gathright <div id='delay' title='Group 1: 2 sec limit'></div>
af1c7fbcbde4a0b9260ae174536ae921c4e07263Derek Gathright <h5>JavaScript</h5>
af1c7fbcbde4a0b9260ae174536ae921c4e07263Derek Gathright var delayGroup = new Y.ImgLoadGroup({ timeLimit: 2 });
af1c7fbcbde4a0b9260ae174536ae921c4e07263Derek Gathright delayGroup.registerImage({ domId: 'delay', bgUrl: '{{componentAssets}}/yui-logo.png', isPng: true });
2efa5d21c4504f140aae54b5efcf45cedc0efc5aDerek Gathright<div id="group2">
2efa5d21c4504f140aae54b5efcf45cedc0efc5aDerek Gathright <h2>Group 2: Window scroll event</h2>
af1c7fbcbde4a0b9260ae174536ae921c4e07263Derek Gathright <p>This will appear when the scroll event is fired.</p>
2efa5d21c4504f140aae54b5efcf45cedc0efc5aDerek Gathright <div class='example'>
abf8b2e249b86b7bc5986c3e2478a9ba026b74e6Derek Gathright <div class='yuiLogo' title='Group 2: scroll'>
abf8b2e249b86b7bc5986c3e2478a9ba026b74e6Derek Gathright <img id='scroll' style='visibility:hidden;' />
af1c7fbcbde4a0b9260ae174536ae921c4e07263Derek Gathright <h5>HTML</h5>
af1c7fbcbde4a0b9260ae174536ae921c4e07263Derek Gathright <img id='scroll' style='visibility:hidden;' />
af1c7fbcbde4a0b9260ae174536ae921c4e07263Derek Gathright <h5>JavaScript</h5>
af1c7fbcbde4a0b9260ae174536ae921c4e07263Derek Gathright var scrollGroup = new Y.ImgLoadGroup();
af1c7fbcbde4a0b9260ae174536ae921c4e07263Derek Gathright scrollGroup.registerImage({ domId: 'scroll', srcUrl: '{{componentAssets}}/yui-logo.png', isPng: true, setVisible: true });
af1c7fbcbde4a0b9260ae174536ae921c4e07263Derek Gathright scrollGroup.addTrigger(window, 'scroll');
af1c7fbcbde4a0b9260ae174536ae921c4e07263Derek Gathright <div id="group3">
af1c7fbcbde4a0b9260ae174536ae921c4e07263Derek Gathright <h2>Group 3: Mouse over</h2>
abf8b2e249b86b7bc5986c3e2478a9ba026b74e6Derek Gathright <p>This will appear when you mouse over it.</p>
af1c7fbcbde4a0b9260ae174536ae921c4e07263Derek Gathright <div class="example">
af1c7fbcbde4a0b9260ae174536ae921c4e07263Derek Gathright <div class='yuiLogo' id='mouseover' title='Group 3: mouseover'></div>
abf8b2e249b86b7bc5986c3e2478a9ba026b74e6Derek Gathright <h5>HTML</h5>
abf8b2e249b86b7bc5986c3e2478a9ba026b74e6Derek Gathright <div id='mouseover' title='Group 3: mouseover'></div>
abf8b2e249b86b7bc5986c3e2478a9ba026b74e6Derek Gathright <h5>JavaScript</h5>
abf8b2e249b86b7bc5986c3e2478a9ba026b74e6Derek Gathright var mouseoverGroup = new Y.ImgLoadGroup();
7dc788cbb483ca991fd19112784305901dd659b0Derek Gathright mouseoverGroup.registerImage({ domId: 'scroll', srcUrl: '{{componentAssets}}/yui-logo.png', isPng: true, setVisible: true });
abf8b2e249b86b7bc5986c3e2478a9ba026b74e6Derek Gathright mouseoverGroup.addTrigger(window, 'scroll');
af1c7fbcbde4a0b9260ae174536ae921c4e07263Derek Gathright <div id="group4">
af1c7fbcbde4a0b9260ae174536ae921c4e07263Derek Gathright <h2>Group 4: Onclick</h2>
abf8b2e249b86b7bc5986c3e2478a9ba026b74e6Derek Gathright <p>These will appear when either one is clicked.</p>
af1c7fbcbde4a0b9260ae174536ae921c4e07263Derek Gathright <div class="example">
af1c7fbcbde4a0b9260ae174536ae921c4e07263Derek Gathright <div class='yuiLogo' id='duo1' title='Group 4: onclick'></div>
af1c7fbcbde4a0b9260ae174536ae921c4e07263Derek Gathright <div class='yuiLogo' id='duo2' title='Group 4: onclick'></div>
abf8b2e249b86b7bc5986c3e2478a9ba026b74e6Derek Gathright <h5>HTML</h5>
abf8b2e249b86b7bc5986c3e2478a9ba026b74e6Derek Gathright <div id='duo1' title='Group 4: onclick'></div>
abf8b2e249b86b7bc5986c3e2478a9ba026b74e6Derek Gathright <div id='duo2' title='Group 4: onclick'></div>
abf8b2e249b86b7bc5986c3e2478a9ba026b74e6Derek Gathright <h5>JavaScript</h5>
abf8b2e249b86b7bc5986c3e2478a9ba026b74e6Derek Gathright var clickGroup = new Y.ImgLoadGroup();
7dc788cbb483ca991fd19112784305901dd659b0Derek Gathright clickGroup.registerImage({ domId: 'duo1', bgUrl: '{{componentAssets}}/yui-logo.png', isPng: true });
7dc788cbb483ca991fd19112784305901dd659b0Derek Gathright clickGroup.registerImage({ domId: 'duo2', bgUrl: '{{componentAssets}}/yui-logo.png', isPng: true });
abf8b2e249b86b7bc5986c3e2478a9ba026b74e6Derek Gathright clickGroup.addTrigger('#duo2', 'click').addTrigger('#duo1', 'click');
abf8b2e249b86b7bc5986c3e2478a9ba026b74e6Derek Gathright YUI().use("imageloader", function(Y) {
abf8b2e249b86b7bc5986c3e2478a9ba026b74e6Derek Gathright var delayGroup = new Y.ImgLoadGroup({ timeLimit: 2 });
7dc788cbb483ca991fd19112784305901dd659b0Derek Gathright delayGroup.registerImage({ domId: 'delay', bgUrl: '{{componentAssets}}/yui-logo.png', isPng: true });
abf8b2e249b86b7bc5986c3e2478a9ba026b74e6Derek Gathright var scrollGroup = new Y.ImgLoadGroup();
abf8b2e249b86b7bc5986c3e2478a9ba026b74e6Derek Gathright scrollGroup.addTrigger(window, 'scroll');
7dc788cbb483ca991fd19112784305901dd659b0Derek Gathright scrollGroup.registerImage({ domId: 'scroll', srcUrl: '{{componentAssets}}/yui-logo.png', isPng: true, setVisible: true });
abf8b2e249b86b7bc5986c3e2478a9ba026b74e6Derek Gathright var mouseoverGroup = new Y.ImgLoadGroup();
abf8b2e249b86b7bc5986c3e2478a9ba026b74e6Derek Gathright mouseoverGroup.addTrigger('#mouseover', 'mouseover');
7dc788cbb483ca991fd19112784305901dd659b0Derek Gathright mouseoverGroup.registerImage({ domId: 'mouseover', bgUrl: '{{componentAssets}}/yui-logo.png', isPng: true });
abf8b2e249b86b7bc5986c3e2478a9ba026b74e6Derek Gathright var clickGroup = new Y.ImgLoadGroup();
abf8b2e249b86b7bc5986c3e2478a9ba026b74e6Derek Gathright clickGroup.addTrigger('#duo2', 'click').addTrigger('#duo1', 'click');
7dc788cbb483ca991fd19112784305901dd659b0Derek Gathright clickGroup.registerImage({ domId: 'duo1', bgUrl: '{{componentAssets}}/yui-logo.png', isPng: true });
7dc788cbb483ca991fd19112784305901dd659b0Derek Gathright clickGroup.registerImage({ domId: 'duo2', bgUrl: '{{componentAssets}}/yui-logo.png', isPng: true });
abf8b2e249b86b7bc5986c3e2478a9ba026b74e6Derek Gathright<h2>Basic Features of the ImageLoader Utility</h2>
abf8b2e249b86b7bc5986c3e2478a9ba026b74e6Derek Gathright The ImageLoader Utility allows you to define the conditions under which images are loaded into the page.
abf8b2e249b86b7bc5986c3e2478a9ba026b74e6Derek Gathright This example demonstrates attaching some simple triggers to images to establish this load control.
abf8b2e249b86b7bc5986c3e2478a9ba026b74e6Derek Gathright The HTML used for the image needs little to no modification.
abf8b2e249b86b7bc5986c3e2478a9ba026b74e6Derek Gathright Simply make sure the <code><img></code> elements have <code>id</code> attributes, eliminate the <code>src</code> attribute
abf8b2e249b86b7bc5986c3e2478a9ba026b74e6Derek Gathright from <code><img></code> elements, and optionally set their <code>visibility</code> style to "hidden" .
abf8b2e249b86b7bc5986c3e2478a9ba026b74e6Derek Gathright <img id='image' style='visibility:hidden;' />