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.

• Tab One
• Tab Two
• Tab Three

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:

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.