diff -r 322d0feea350 -r 89ef5ed3c48b src/cm/media/js/lib/yui/yui_3.10.3/docs/imageloader/below-fold.html --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/src/cm/media/js/lib/yui/yui_3.10.3/docs/imageloader/below-fold.html Tue Jul 16 14:29:46 2013 +0200 @@ -0,0 +1,212 @@ + + + + + Example: Loading Images Below the Fold + + + + + + + + + + +
+
+

+
+ + +

Example: 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 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://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small/museum.jpg' });
+foldGroup.registerImage({ domId: 'img2', srcUrl: 'http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small/uluru.jpg' });
+foldGroup.registerImage({ domId: 'img3', srcUrl: 'http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small/katatjuta.jpg' });
+foldGroup.registerImage({ domId: 'img4', srcUrl: 'http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small/morraine.jpg' });
+foldGroup.registerImage({ domId: 'img5', srcUrl: 'http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small/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. +

+
+
+
+ +
+
+ + + +
+
+

Examples

+
+ +
+ +
+
+ + + +
+
+
+
+ + + + + + + + + + +