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

August 21, 2007 at 7:56 am by Eric Miraglia | In YUI Theater | 6 Comments

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 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).

6 Comments »

RSS feed for comments on this post. TrackBack URI

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)..?

Comment by Tommy Valand — August 21, 2007 #
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.

Comment by Matt Mlinac — August 21, 2007 #
[...] The YUI ImageLoader Utility – new class from the YUI team which allows to defer loading images below the browser fold. [...]

Pingback by Morning Brew #65 — August 22, 2007 #
[...] A detailed description can also be found on the YUI blog. [...]

Pingback by Ajaxian » YUI’s Experimental ImageLoader Utility — August 24, 2007 #
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.

Comment by Mika Tuupola — September 3, 2007 #
Awesome. I love this. I love the jquery port even better unfortunately :o/.

Comment by Chris — July 18, 2008 #

Yahoo! User Interface Blog (YUIBlog)