ImageLoader Utility: Loading Images Below the Fold

Often pages will have a number of images below the fold, hidden from the user's view. These are prime candidates to load with the ImageLoader Utility.

All the images in this example belong to the same group, and all load immediately only if they appear above the fold of the page.

View example in new window.

Loading Images Below the Fold

You can easily have images load immediately if they are above the fold while delaying the load of images below the fold. This saves you from loading any images that the user can't see at page load because they're beyond her browser's viewable area.

All we need is one group, and we set its foldConditional flag to true. Any group with this flag set will, during the page's onload function, examine the page coordinates of all images registered to that group. Any images located above the fold will load immediately. The rest will wait for the group's triggers or time limit.

As is customary with a "foldConditional" group, we have defined two triggers for this group. Both of these alter the viewable area of the browser: the scroll and resize events of the window.

How do you know that the images below the fold are, in fact, not loaded immediately? There are several tools available to monitor the HTTP requests of your browser, including Firebug for Firefox and HTTPWatch for IE. With these tools you can monitor precisely when each image on a page is loaded.

Configuration for This Example

You can load the necessary JavaScript and CSS for this example from Yahoo's servers. Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured.