YUI Theater — Matt Mlinac: “The YUI ImageLoader Utility”

By Eric MiragliaAugust 21st, 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)

6 Comments

  1. Tommy Valand said:
    August 21, 2007 at 8:42 am

    Instead of using partially (in)accessible markup, wouldn’t it be possible to calculate the images in-/visible to the user, “onDomContentLoaded”.

    Then rename (copy/delete) the src-attribute, so that the image is not loaded. On your load-image-event, rename the src back?

    This would not stop the request to the server, but should stop the loading of the image (which saves bandwidth)..?

  2. Matt Mlinac said:
    August 21, 2007 at 11:59 am

    Thanks for the idea Tommy.

    Accessibility is definitely what we’ve been talking about most while developing ImageLoader. Admittedly, yes, there are some accessibility trade-offs (or alternatively some extra work with browser detection).

    We discussed an approach like the one you suggest but decided that we really didn’t want the race condition between the browser’s image loading and the JavaScript. Unfortunately there’s no way (that we could think of doing cleanly) to write the full markup but also command the browser to not load images immediately.

  3. Morning Brew #65 said:
    August 22, 2007 at 3:08 am

    [...] The YUI ImageLoader Utility – new class from the YUI team which allows to defer loading images below the browser fold. [...]

  4. Ajaxian » YUI’s Experimental ImageLoader Utility said:
    August 24, 2007 at 11:39 am

    [...] A detailed description can also be found on the YUI blog. [...]

  5. Mika Tuupola said:
    September 3, 2007 at 1:19 pm

    Inspired by Matt’s code I wrote a small plugin for jQuery which defers loading of below the fold images.

    I do use the removing src attribute when dom is ready method. Have not experienced any race conditions. Althought Safari still load everything even after src is removed.

    What kind of problems you encountered?

    In any case check Lazy Load for jQuery.

  6. Chris said:
    July 18, 2008 at 2:02 pm

    Awesome. I love this. I love the jquery port even better unfortunately :o/.