YUI Library Home

Site Search (YDN & YUIBlog):

# YUI Library Examples: ImageLoader Utility: ImageLoader with TabView

# ImageLoader Utility: ImageLoader with TabView

Here we demonstrate integrating the ImageLoader Utility with the TabView Control.

Also illustrated are the considerations for the ImageLoader group triggers, as they involve some reasoning on the developer's part.

Here, each tab contains images and a corresponding ImageLoader group. Triggers are set as `mouseover` events of each tab.

View example in new window.

## Using ImageLoader with TabView

By nature, tabbed modules conceal some page content. If any of the non-default tabs contain images, then they are prime candidates for use with the ImageLoader Utility.

After we've created the TabView HTML and JavaScript object, we set up one ImageLoader group per tab. The first tab needs no delayed image loading because its image is immediately visible. Here is how we set up the second tab:

var tabTwoImageGroup = new YAHOO.util.ImageLoader.group('tabTwoLabel', 'mouseover'); tabTwoImageGroup.registerSrcImage('imgTwo', 'http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small/uluru.jpg'); tabTwoImageGroup.registerSrcImage('imgThree', 'http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small/katatjuta.jpg'); tabTwoImageGroup.addTrigger('tabTwoLabel', 'focus');

The third tab is set up exactly the same as the second, with `mouseover` and `focus` triggers.

## Explanation of the Triggers

Why do we use a `mouseover` of the tab label as the trigger? Well, it's the click of the tab label that will expose that tab's images to the user. But we don't want to wait until the images are exposed. We want to do better than that; we want to be as anticipatory as possible. We know that the user must mouse over the tab label before she can click it. And conversely, if the user mouses over the tab label, that's a good indication she is about to click it. These conditions make the label `mouseover` a fitting trigger.

What about the second trigger we add, the `focus` event? The reason for this is because there is another way the user can click the tab label and expose the images. Using TabView, we've made the labels `<a>` elements. Consequently the user could, using her keyboard, `tab` through the page and click `enter` on the tab label. This renders our `mouseover` trigger insufficient because it never fires. Thus we add the `focus` event trigger, which will fire as soon as the user `tabs` to the label.

We've omitted a time limit for this group because it's feasible that the user will never be interested in this tab and thus never expose the images. Depending on your use case, you may find a time limit appropriate.

## Configuration for This Example

You can load the necessary JavaScript and CSS for this example from Yahoo's servers. Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured.

### YUI Logger Output:

### ImageLoader Utility Examples:

- Basic Features of the ImageLoader Utility
- Loading Images Below the Fold
- Using ImageLoader with CSS Class Names
- ImageLoader with TabView

### More ImageLoader Utility Resources:

- User's Guide (external)
- API Documentation
- Cheat Sheet PDF (external)

Copyright © 2010 Yahoo! Inc. All rights reserved.

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