YUI Theater — Matt Mlinac: "The YUI ImageLoader Utility"

By YUI TeamAugust 21, 2007

One of the new components in YUI version 2.3.0 is the ImageLoader Utility (User's Guide; examples; Cheat Sheet), an experimental component written by Yahoo! Travel engineer Matt Mlinac that allows you to defer the loading of some images during the initial page load.

ImageLoader operates on the premise that image data for some images is unnecessary at the initial paint of the page, usually for one of two reasons:

  1. The image is "below the fold" — that is, outside of the viewport;
  2. The image is in the DOM but will not be made visible until some user interaction takes place, as is the case in some TabView implementations.

Yahoo! engineer Matt Mlinac introduces the YUI ImageLoader Utility.ImageLoader allows you to withhold the src attribute of images (which prevents them from loading, obviously) while still supplying other accessibility-related attributes like alt and longdesc. ImageLoader provides a "foldConditional" property that automatically senses whether images are in the viewport, enabling easy implementation of the simplest image deferral scenario. In all scenarios, ImageLoader allows you to define specific triggers that cause image data to load. Common triggers include the window's scroll event (which can bring "below-the-fold" images into view), the user mousing over a control that might reveal deferred images in a widget, and so on.

In this 9-minute video, Matt talks through some of those scenarios, walks through three examples, and introduces you to basic code patterns to get you started evaluating this interesting component.

While there are non-trivial drawbacks to withholding the src attribute from images, the savings in overall K-weight at initial pageload can be dramatic for some implementations. The least-obtrusive way to implement ImageLoader is to provide all visitors with image src attributes on the first visit to your site and then, if you determine that a given user has JavaScript enabled, begin applying ImageLoader (and withholding src attributes) on subsequent page views. That said, there are obviously some implementations where ImageLoader is a better fit than others, and for some the objection to withholding the src attribute under any circumstances is too much to overcome. For sites that rely on the SEO characteristics that obtain when search spiders can match image tag attribute data to image source URLs, the ImageLoader approach would be detrimental. We've released ImageLoader as an experimental component and we're interested to hear your feedback on the utility and its intrinsic assumptions in the YUI community forums.

This video is available in Flash format on Yahoo! Video and as an MPEG-4, iPod-compatible (and iPhone-compatible!) download (change the extension from .m4v to .mp4 if your video software doesn't recognize the extension).

Full documentation and examples for the YUI ImageLoader can be found on the YUI website.

In Case You Missed...

Some other recent videos from the YUI Theater series:

  1. Shawn Lawton Henry: "Web Content Accessibility Guidelines Update" (Yahoo! Video | .mp4 download)
  2. Joe Hewitt: "An Introduction to iUI" (Yahoo! Video | .m4v download)
  3. Karo Caran: "An Introduction to Screen Maginfication Software" (Yahoo! Video | .m4v download)
  4. Douglas Crockford: "JavaScript: The Good Parts" (Yahoo! Video | .m4v download)