YUI Theater — Matt Mlinac: "The YUI ImageLoader Utility"
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:
- The image is "below the fold" — that is, outside of the viewport;
- 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.
ImageLoader allows you to withhold the
src attribute of images (which prevents them from loading, obviously) while still supplying other accessibility-related attributes like
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 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
.mp4 if your video software doesn't recognize the extension).
In Case You Missed...
Some other recent videos from the YUI Theater series:
- Shawn Lawton Henry: "Web Content Accessibility Guidelines Update" (Yahoo! Video | .mp4 download)
- Joe Hewitt: "An Introduction to iUI" (Yahoo! Video | .m4v download)
- Karo Caran: "An Introduction to Screen Maginfication Software" (Yahoo! Video | .m4v download)