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.
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.
The third tab is set up exactly the same as the second, with
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.