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 each loads immediately only when it appears above, or within the specified distance (25px) of, the page fold.
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 because they are beyond her browser's viewable area.
All we need is one group, and we specify its foldDistance attribute to 25 (25px).
Any group with this attribute set will, at the DOM ready state, examine the page coordinates of all images registered
to that group. Any images located above the fold, or no farther than the specified distance below the fold, will load immediately.
The rest will be checked again at any scroll or resize event and be loaded only when they're near enough
to the fold.
var foldGroup = new Y.ImgLoadGroup({ name: 'fold group', foldDistance: 25 });
foldGroup.registerImage({ domId: 'img1', srcUrl: 'http://yui.yahooapis.com/testassets/museum.jpg' });
foldGroup.registerImage({ domId: 'img2', srcUrl: 'http://yui.yahooapis.com/testassets/uluru.jpg' });
foldGroup.registerImage({ domId: 'img3', srcUrl: 'http://yui.yahooapis.com/testassets/katatjuta.jpg' });
foldGroup.registerImage({ domId: 'img4', srcUrl: 'http://yui.yahooapis.com/testassets/morraine.jpg' });
foldGroup.registerImage({ domId: 'img5', srcUrl: 'http://yui.yahooapis.com/testassets/japan.jpg' });
When you specify a foldDistance value, scroll and resize triggers are added to the
group automatically. Thus you will typically not need to set any triggers for the group explicitly.
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.