--- /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 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <title>Example: Loading Images Below the Fold</title>
+ <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic,700italic">
+ <link rel="stylesheet" href="../../build/cssgrids/cssgrids-min.css">
+ <link rel="stylesheet" href="../assets/css/main.css">
+ <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
+ <link rel="shortcut icon" type="image/png" href="../assets/favicon.png">
+ <script src="../../build/yui/yui-min.js"></script>
+
+</head>
+<body>
+<!--
+<a href="https://github.com/yui/yui3"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>
+-->
+<div id="doc">
+ <div id="hd">
+ <h1><img src="http://yuilibrary.com/img/yui-logo.png"></h1>
+ </div>
+
+
+ <h1>Example: Loading Images Below the Fold</h1>
+ <div class="yui3-g">
+ <div class="yui3-u-3-4">
+ <div id="main">
+ <div class="content"><div class="intro">
+
+ <p>
+ 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 <a href="http://developer.yahoo.com/yui/imageloader/">ImageLoader Utility</a>.
+ </p>
+
+ <p>
+ 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.
+ </p>
+
+</div>
+
+<div class="example">
+ <!--BEGIN SOURCE CODE FOR EXAMPLE ===============================-->
+
+ <style>
+ .everything .cont { border:1px solid #888; width:100px; margin:75px 50px; }
+ .everything .rightCol { margin-left:300px; }
+ #img1Cont { height:75px; margin-top:25px; }
+ #img2Cont { height:67px; }
+ #img3Cont { height:53px; }
+ #img4Cont { height:72px; }
+ #img5Cont { height:75px; margin-bottom:25px; }
+ </style>
+
+
+ <div class='everything' id='everything'>
+ <div class='cont' id='img1Cont'>
+ <img id='img1' />
+ </div>
+ <div class='cont rightCol' id='img2Cont'>
+ <img id='img2' />
+ </div>
+ <div class='cont' id='img3Cont'>
+ <img id='img3' />
+
+ </div>
+ <div class='cont rightCol' id='img4Cont'>
+ <img id='img4' />
+ </div>
+ <div class='cont' id='img5Cont'>
+ <img id='img5' />
+ </div>
+ </div>
+
+
+ <script>
+
+ YUI({filter:"debug", logInclude: {"imageloader":true, "example":true}}).use("imageloader", function(Y) {
+
+ 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' });
+
+ /*
+ var foldGroup = new YAHOO.util.ImageLoader.group(window, 'scroll');
+ foldGroup.foldConditional = true;
+ //foldGroup.addTrigger(window, 'resize');
+ foldGroup.name = 'fold_group';
+ */
+
+ /*
+ * This uncustomary wait before adding the resize trigger is done specifically to cater to IE for this example.
+ * In IE and with the Logger enabled, IE fires an immediate resize event while rendering the Logger module, consequently loading all the images in the example.
+ * This 200 ms delay allows IE to render the Logger without interference.
+ * In your code, you would add the resize trigger in a straightforward fashion, as is documented in the example.
+ */
+ //YAHOO.util.Event.addListener(window, 'load', function() { setTimeout("foldGroup.addTrigger(window, 'resize')", 200); });
+
+ });
+
+ </script>
+
+ <!--END SOURCE CODE FOR EXAMPLE =============================== -->
+
+</div>
+
+<h2>Loading Images Below the Fold</h2>
+
+<p>
+ 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.
+</p>
+
+<p>
+ All we need is one group, and we specify its <code>foldDistance</code> attribute to <code>25</code> (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 <code>scroll</code> or <code>resize</code> event and be loaded only when they're near enough
+ to the fold.
+</p>
+
+<pre class="code prettyprint">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' });</pre>
+
+
+<p>
+ When you specify a <code>foldDistance</code> value, <code>scroll</code> and <code>resize</code> triggers are added to the
+ group automatically. Thus you will typically not need to set any triggers for the group explicitly.
+</p>
+
+<p>
+ 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.
+</p>
+</div>
+ </div>
+ </div>
+
+ <div class="yui3-u-1-4">
+ <div class="sidebar">
+
+
+
+ <div class="sidebox">
+ <div class="hd">
+ <h2 class="no-toc">Examples</h2>
+ </div>
+
+ <div class="bd">
+ <ul class="examples">
+
+
+ <li data-description="Demonstrates the basic features and operation of the ImageLoader Utility, deferring the loading of images until specific events happen or specific time limits expire.">
+ <a href="basic-features.html">Basic Features of the ImageLoader Utility</a>
+ </li>
+
+
+
+ <li data-description="Loading images above the fold immediately while deferring the loading of images below the fold.">
+ <a href="below-fold.html">Loading Images Below the Fold</a>
+ </li>
+
+
+
+ <li data-description="Using CSS class names to target specific images for deferred loading.">
+ <a href="imageloader-class-names.html">Using ImageLoader with CSS Class Names</a>
+ </li>
+
+
+ </ul>
+ </div>
+ </div>
+
+
+
+ </div>
+ </div>
+ </div>
+</div>
+
+<script src="../assets/vendor/prettify/prettify-min.js"></script>
+<script>prettyPrint();</script>
+
+<script>
+YUI.Env.Tests = {
+ examples: [],
+ project: '../assets',
+ assets: '../assets/imageloader',
+ name: 'below-fold',
+ title: 'Loading Images Below the Fold',
+ newWindow: '',
+ auto: false
+};
+YUI.Env.Tests.examples.push('basic-features');
+YUI.Env.Tests.examples.push('below-fold');
+YUI.Env.Tests.examples.push('imageloader-class-names');
+
+</script>
+<script src="../assets/yui/test-runner.js"></script>
+
+
+
+</body>
+</html>