YUI 3.x Home -

Site Search (YDN & YUIBlog):

# YUI Library Examples: ImageLoader: Basic Features of the ImageLoader Utility

## ImageLoader: Basic Features of the ImageLoader Utility

Displayed here are the basic abilities of the ImageLoader Utility. Images are loaded only after triggers are fired or time limits are reached.

Hover over each image to show its triggers and its time limit. Try tripping the triggers to see the load reactions. Refresh the page to reset the images.

View example in new window.

## Basic Features of the ImageLoader Utility

The ImageLoader Utility allows you to define the conditions under which images are loaded into the page. This example demonstrates attaching some simple triggers to images to establish this load control.

The HTML used for the image needs little to no modification. Simply make sure the image elements have `id` attributes, eliminate the `src` attribute from `<img>` elements, and optionally declare `<img>` elements as having hidden visibility.

    <div class='everything' id='everything'>	<div class='topmain' id='topmain'></div>	<div class='duo1' id='duo1'></div>	<div class='duo2' id='duo2'></div>	<div class='png' id='pngimg'></div>	<div class='scroll'>		<img id='scrollImg' style='visibility:hidden;' />	</div></div>

    <div class='everything' id='everything'>
    	<div class='topmain' id='topmain'></div>
    	<div class='duo1' id='duo1'></div>
    	<div class='duo2' id='duo2'></div>
    	<div class='png' id='pngimg'></div>
    	<div class='scroll'>
    		<img id='scrollImg' style='visibility:hidden;' />
    	</div>
    </div>

<div class='everything' id='everything'> <div class='topmain' id='topmain'></div> <div class='duo1' id='duo1'></div> <div class='duo2' id='duo2'></div> <div class='png' id='pngimg'></div> <div class='scroll'> <img id='scrollImg' style='visibility:hidden;' /> </div> </div>

In JavaScript, create one ImageLoader group for each set of images and register each image with the group. Let's step through the groups one by one.

Starting with the architectural image at the top. We set a `mouseover` of the image itself as a trigger, and a 2-second time limit.

    var mainGroup = new Y.ImgLoadGroup({ name: 'group 1', timeLimit: 2 });mainGroup.addTrigger('#topmain', 'mouseover');mainGroup.registerImage({ domId: 'topmain', bgUrl: 'http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small/museum.jpg' });

    var mainGroup = new Y.ImgLoadGroup({ name: 'group 1', timeLimit: 2 });
    mainGroup.addTrigger('#topmain', 'mouseover');
    mainGroup.registerImage({ domId: 'topmain', bgUrl: 'http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small/museum.jpg' });

var mainGroup = new Y.ImgLoadGroup({ name: 'group 1', timeLimit: 2 }); mainGroup.addTrigger('#topmain', 'mouseover'); mainGroup.registerImage({ domId: 'topmain', bgUrl: 'http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small/museum.jpg' });

The second group has two images, and also two triggers. As triggers, we have a `mouseover` of the left image and a `click` on the right image.

    var duoGroup = new Y.ImgLoadGroup({ name: 'group 2', timeLimit: 4 });duoGroup.addTrigger('#duo1', 'mouseover').addTrigger('#duo2', 'click');duoGroup.registerImage({ domId: 'duo1', bgUrl: 'http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small/uluru.jpg' });duoGroup.registerImage({ domId: 'duo2', bgUrl: 'http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small/katatjuta.jpg' });

    var duoGroup = new Y.ImgLoadGroup({ name: 'group 2', timeLimit: 4 });
    duoGroup.addTrigger('#duo1', 'mouseover').addTrigger('#duo2', 'click');
    duoGroup.registerImage({ domId: 'duo1', bgUrl: 'http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small/uluru.jpg' });
    duoGroup.registerImage({ domId: 'duo2', bgUrl: 'http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small/katatjuta.jpg' });

var duoGroup = new Y.ImgLoadGroup({ name: 'group 2', timeLimit: 4 }); duoGroup.addTrigger('#duo1', 'mouseover').addTrigger('#duo2', 'click'); duoGroup.registerImage({ domId: 'duo1', bgUrl: 'http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small/uluru.jpg' }); duoGroup.registerImage({ domId: 'duo2', bgUrl: 'http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small/katatjuta.jpg' });

The third group has no trigger; the only thing that will load the image is its time limit of 5 seconds.

    var pngGroup = new Y.ImgLoadGroup({ name: 'group 3', timeLimit: 5 });pngGroup.registerImage({ domId: 'pngimg', bgUrl: 'http://l.yimg.com/a/i/us/nws/weather/gr/47s.png', isPng: true });

    var pngGroup = new Y.ImgLoadGroup({ name: 'group 3', timeLimit: 5 });
    pngGroup.registerImage({ domId: 'pngimg', bgUrl: 'http://l.yimg.com/a/i/us/nws/weather/gr/47s.png', isPng: true });

var pngGroup = new Y.ImgLoadGroup({ name: 'group 3', timeLimit: 5 }); pngGroup.registerImage({ domId: 'pngimg', bgUrl: 'http://l.yimg.com/a/i/us/nws/weather/gr/47s.png', isPng: true });

In the last group, we have an image loaded by the window's `scroll` event. Since this is an `<img>` element, we omit the `src` attribute. Also, we'll set the visibility to hidden to avoid a broken image icon. (Our other option is to use a transparent image as the source, but the tradeoff is the load burden of this additional image.) Because we've hidden the image, we need to make sure it gets changed to visible via the `setVisible` flag. This group has no time limit, so the only thing that will load the image is its `scroll` trigger.

    var scrollGroup = new Y.ImgLoadGroup({ name: 'group 4' });scrollGroup.addTrigger(window, 'scroll');scrollGroup.registerImage({ domId: 'scrollImg', srcUrl: 'http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small/morraine.jpg', setVisible: true });

    var scrollGroup = new Y.ImgLoadGroup({ name: 'group 4' });
    scrollGroup.addTrigger(window, 'scroll');
    scrollGroup.registerImage({ domId: 'scrollImg', srcUrl: 'http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small/morraine.jpg', setVisible: true });

var scrollGroup = new Y.ImgLoadGroup({ name: 'group 4' }); scrollGroup.addTrigger(window, 'scroll'); scrollGroup.registerImage({ domId: 'scrollImg', srcUrl: 'http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small/morraine.jpg', setVisible: true });

Copyright © 2009 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings