--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/src/cm/media/js/lib/yui/yui3.0.0/examples/imageloader/imageloader-fold.html Mon Nov 23 15:14:29 2009 +0100
@@ -0,0 +1,223 @@
+
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+<head>
+ <title>YUI Library Examples: ImageLoader: Loading Images Below the Fold</title>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8">
+ <link rel="stylesheet" type="text/css" href="../../assets/yui.css" >
+
+<style>
+ /*Supplemental CSS for the YUI distribution*/
+ #custom-doc { width: 95%; min-width: 950px; }
+ #pagetitle {background-image: url(../../assets/bg_hd.gif);}
+/* #pagetitle h1 {background-image: url(../../assets/title_h_bg.gif);}*/
+</style>
+
+<link rel="stylesheet" type="text/css" href="../../assets/dpSyntaxHighlighter.css">
+
+<!--there is no custom header content for this example-->
+
+<link type="text/css" rel="stylesheet" href="../../build/cssfonts/fonts-min.css" />
+<script type="text/javascript" src="../../build/yui/yui-debug.js"></script>
+
+</head>
+<body id="yahoo-com" class=" yui-skin-sam">
+<div id="custom-doc" class="yui-t2">
+<div id="hd">
+ <div id="ygunav">
+ <p>
+ <em>
+ <a href="http://developer.yahoo.com/yui/3/">YUI 3.x Home</a> <i> - </i>
+ </em>
+ </p>
+ <form action="http://search.yahoo.com/search" id="sitesearchform">
+ <input name="vs" type="hidden" value="developer.yahoo.com">
+ <input name="vs" type="hidden" value="yuiblog.com">
+ <div id="sitesearch">
+ <label for="searchinput">Site Search (YDN & YUIBlog): </label>
+ <input type="text" id="searchinput" name="p">
+ <input type="submit" value="Search" id="searchsubmit" class="ygbt">
+ </div>
+ </form>
+ </div>
+ <div id="ygma"><a href="../../"><img src="../../assets/logo.gif" border="0" width="200" height="93"></a></div>
+ <div id="pagetitle"><h1>YUI Library Examples: ImageLoader: Loading Images Below the Fold</h1></div>
+</div>
+<div id="bd">
+
+
+ <div id="yui-main">
+ <div class="yui-b">
+ <div class="yui-ge">
+ <div class="yui-u first example" id="main">
+
+ <h2>ImageLoader: Loading Images Below the Fold</h2>
+
+ <div id="example" class="promo">
+ <div class="example-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="module example-container ">
+ <div class="hd exampleHd">
+ <p class="newWindowButton yui-skin-sam">
+ <a href="imageloader-fold_clean.html" target="_blank">View example in new window.</a>
+ </p>
+ </div> <div id="example-canvas" class="bd">
+
+
+ <!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
+
+ <style>
+
+.everything .cont { border:1px solid #888; width:100px; margin:75px 50px; }
+.everything .right { 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 right' id='img2Cont'>
+ <img id='img2' />
+ </div>
+ <div class='cont' id='img3Cont'>
+ <img id='img3' />
+ </div>
+ <div class='cont right' id='img4Cont'>
+ <img id='img4' />
+ </div>
+ <div class='cont' id='img5Cont'>
+ <img id='img5' />
+ </div>
+</div>
+
+
+<script>
+
+YUI({base:"../../build/", timeout: 10000, 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>
+ </div>
+ </div>
+
+ <h2 class='first'>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>
+
+<div id="syntax1" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="kw2">var</span> foldGroup <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">ImgLoadGroup</span><span class="br0">(</span><span class="br0">{</span> <span class="kw3">name</span><span class="sy0">:</span> <span class="st0">'fold group'</span><span class="sy0">,</span> foldDistance<span class="sy0">:</span> <span class="nu0">25</span> <span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">foldGroup.<span class="me1">registerImage</span><span class="br0">(</span><span class="br0">{</span> domId<span class="sy0">:</span> <span class="st0">'img1'</span><span class="sy0">,</span> srcUrl<span class="sy0">:</span> <span class="st0">'http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small/museum.jpg'</span> <span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">foldGroup.<span class="me1">registerImage</span><span class="br0">(</span><span class="br0">{</span> domId<span class="sy0">:</span> <span class="st0">'img2'</span><span class="sy0">,</span> srcUrl<span class="sy0">:</span> <span class="st0">'http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small/uluru.jpg'</span> <span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">foldGroup.<span class="me1">registerImage</span><span class="br0">(</span><span class="br0">{</span> domId<span class="sy0">:</span> <span class="st0">'img3'</span><span class="sy0">,</span> srcUrl<span class="sy0">:</span> <span class="st0">'http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small/katatjuta.jpg'</span> <span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2">foldGroup.<span class="me1">registerImage</span><span class="br0">(</span><span class="br0">{</span> domId<span class="sy0">:</span> <span class="st0">'img4'</span><span class="sy0">,</span> srcUrl<span class="sy0">:</span> <span class="st0">'http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small/morraine.jpg'</span> <span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">foldGroup.<span class="me1">registerImage</span><span class="br0">(</span><span class="br0">{</span> domId<span class="sy0">:</span> <span class="st0">'img5'</span><span class="sy0">,</span> srcUrl<span class="sy0">:</span> <span class="st0">'http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small/japan.jpg'</span> <span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;"><span class="kw2">var</span> foldGroup <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">ImgLoadGroup</span><span class="br0">(</span><span class="br0">{</span> <span class="kw3">name</span><span class="sy0">:</span> <span class="st0">'fold group'</span><span class="sy0">,</span> foldDistance<span class="sy0">:</span> <span class="nu0">25</span> <span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span>
+foldGroup.<span class="me1">registerImage</span><span class="br0">(</span><span class="br0">{</span> domId<span class="sy0">:</span> <span class="st0">'img1'</span><span class="sy0">,</span> srcUrl<span class="sy0">:</span> <span class="st0">'http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small/museum.jpg'</span> <span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span>
+foldGroup.<span class="me1">registerImage</span><span class="br0">(</span><span class="br0">{</span> domId<span class="sy0">:</span> <span class="st0">'img2'</span><span class="sy0">,</span> srcUrl<span class="sy0">:</span> <span class="st0">'http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small/uluru.jpg'</span> <span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span>
+foldGroup.<span class="me1">registerImage</span><span class="br0">(</span><span class="br0">{</span> domId<span class="sy0">:</span> <span class="st0">'img3'</span><span class="sy0">,</span> srcUrl<span class="sy0">:</span> <span class="st0">'http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small/katatjuta.jpg'</span> <span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span>
+foldGroup.<span class="me1">registerImage</span><span class="br0">(</span><span class="br0">{</span> domId<span class="sy0">:</span> <span class="st0">'img4'</span><span class="sy0">,</span> srcUrl<span class="sy0">:</span> <span class="st0">'http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small/morraine.jpg'</span> <span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span>
+foldGroup.<span class="me1">registerImage</span><span class="br0">(</span><span class="br0">{</span> domId<span class="sy0">:</span> <span class="st0">'img5'</span><span class="sy0">,</span> srcUrl<span class="sy0">:</span> <span class="st0">'http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small/japan.jpg'</span> <span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></pre></div><textarea id="syntax1-plain">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' });</textarea></div>
+<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 class="yui-u sidebar">
+
+
+ <div id="examples" class="mod box4">
+ <div class="hd">
+ <h4>
+ ImageLoader Examples:</h4>
+ </div>
+ <div class="bd">
+ <ul>
+ <li><a href='../imageloader/imageloader-basics.html'>Basic Features of the ImageLoader Utility</a></li><li class='selected'><a href='../imageloader/imageloader-fold.html'>Loading Images Below the Fold</a></li><li><a href='../imageloader/imageloader-class.html'>Using ImageLoader with CSS Class Names</a></li> </ul>
+ </div>
+ </div>
+
+ <div class="mod box4">
+ <div class="hd">
+ <h4>More ImageLoader Resources:</h4>
+ </div>
+ <div class="bd">
+ <ul>
+ <!-- <li><a href="http://developer.yahoo.com/yui/imageloader/">User's Guide</a> (external)</li> -->
+<li><a href="../../api/module_imageloader.html">API Documentation</a></li></ul>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ </div>
+ </div>
+
+
+<div class="yui-b toc3" id="tocWrapper">
+<!-- TABLE OF CONTENTS -->
+<div id="toc">
+
+<ul>
+<li class="sect first">YUI 3 Resources</li><li class="item"><a title="YUI 3 -- Yahoo! User Interface (YUI) Library" href="http://developer.yahoo.com/yui/3/">YUI 3 Web Site</a></li><li class="item"><a title="Examples of every YUI utility and control in action" href="../../examples/">YUI 3 Examples</a></li><li class="item"><a title="Instantly searchable API documentation for the entire YUI library." href="../../api/">YUI 3 API Docs</a></li><li class="item"><a title="YUI 3 Dependency Configurator -- configure your custom YUI implementation" href="http://developer.yahoo.com/yui/3/configurator">YUI 3 Dependency Configurator</a></li><li class="item"><a title="The YUI 3 Forum on YUILibrary.com" href="http://yuilibrary.com/forum/viewforum.php?f=15">YUI 3 Forums (external)</a></li><li class="item"><a title="Found a bug or a missing feature? Let us know on YUILibrary.com." href="http://developer.yahoo.com/yui/articles/reportingbugs/">Bug Reports/Feature Requests</a></li><li class="item"><a title="YUI is free and open, offered under a BSD license." href="http://developer.yahoo.com/yui/license.html">YUI License</a></li><li class="item"><a title="Download and fork the YUI project on GitHub" href="http://github.com/yui">YUI on Github</a></li><li class="item"><a title="The Yahoo! User Interface Blog" href="http://yuiblog.com">YUI Blog (external)</a></li><li class="sect">YUI 3 Core - Examples</li><li class="item"><a title="YUI Global Object - Functional Examples" href="../../examples/yui/index.html">YUI Global Object</a></li><li class="item"><a title="Event - Functional Examples" href="../../examples/event/index.html">Event</a></li><li class="item"><a title="Node - Functional Examples" href="../../examples/node/index.html">Node</a></li><li class="sect">YUI 3 Component Infrastructure - Examples</li><li class="item"><a title="Attribute - Functional Examples" href="../../examples/attribute/index.html">Attribute</a></li><li class="item"><a title="Plugin - Functional Examples" href="../../examples/plugin/index.html">Plugin <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Widget - Functional Examples" href="../../examples/widget/index.html">Widget <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="sect">YUI 3 Utilities - Examples</li><li class="item"><a title="Animation - Functional Examples" href="../../examples/anim/index.html">Animation</a></li><li class="item"><a title="AsyncQueue - Functional Examples" href="../../examples/async-queue/index.html">AsyncQueue</a></li><li class="item"><a title="Browser History - Functional Examples" href="../../examples/history/index.html">Browser History</a></li><li class="item"><a title="Cache - Functional Examples" href="../../examples/cache/index.html">Cache</a></li><li class="item"><a title="Cookie - Functional Examples" href="../../examples/cookie/index.html">Cookie</a></li><li class="item"><a title="DataSchema - Functional Examples" href="../../examples/dataschema/index.html">DataSchema <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="DataSource - Functional Examples" href="../../examples/datasource/index.html">DataSource <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="DataType - Functional Examples" href="../../examples/datatype/index.html">DataType <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Drag & Drop - Functional Examples" href="../../examples/dd/index.html">Drag & Drop</a></li><li class="item"><a title="Get - Functional Examples" href="../../examples/get/index.html">Get</a></li><li class="selected "><a title="ImageLoader - Functional Examples" href="../../examples/imageloader/index.html">ImageLoader</a></li><li class="item"><a title="IO - Functional Examples" href="../../examples/io/index.html">IO</a></li><li class="item"><a title="JSON (JavaScript Object Notation) - Functional Examples" href="../../examples/json/index.html">JSON</a></li><li class="item"><a title="Stylesheet - Functional Examples" href="../../examples/stylesheet/index.html">Stylesheet</a></li><li class="sect">YUI 3 Widgets - Examples</li><li class="item"><a title="Overlay - Functional Examples" href="../../examples/overlay/index.html">Overlay <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Slider - Functional Examples" href="../../examples/slider/index.html">Slider <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="sect">YUI 3 Node Plugins - Examples</li><li class="item"><a title="FocusManager Node Plugin - Functional Examples" href="../../examples/node-focusmanager/index.html">FocusManager Node Plugin <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="MenuNav Node Plugin - Functional Examples" href="../../examples/node-menunav/index.html">MenuNav Node Plugin <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="sect">YUI 3 CSS - Examples</li><li class="item"><a title="YUI CSS Reset - Functional Examples" href="../../examples/cssreset/index.html">CSS Reset</a></li><li class="item"><a title="YUI Fonts - Functional Examples" href="../../examples/cssfonts/index.html">CSS Fonts</a></li><li class="item"><a title="YUI Base - Functional Examples" href="../../examples/cssbase/index.html">CSS Base</a></li><li class="sect">YUI 3 Developer Tools - Examples</li><li class="item"><a title="Console - Functional Examples" href="../../examples/console/index.html">Console <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Console Filters Plugin- Functional Examples" href="../../examples/console-filters/index.html">Plugin.ConsoleFilters <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Profiler - Functional Examples" href="../../examples/profiler/index.html">Profiler</a></li><li class="item"><a title="Test - Functional Examples" href="../../examples/test/index.html">Test</a></li><li class="sect">Other Useful YUI 3 Resources</li><li class="item"><a title="Answers to Frequently Asked Questions about the YUI Library" href="http://developer.yahoo.com/yui/articles/faq/">YUI FAQ (external)</a></li><li class="item"><a title="Yahoo!'s philosophy of Graded Browser Support" href="http://developer.yahoo.com/yui/articles/gbs/">Graded Browser Support (external)</a></li><li class="item"><a title="Videos and podcasts from the YUI Team and from the Yahoo! frontend engineering community." href="http://developer.yahoo.com/yui/theater/">YUI Theater (external)</a></li></ul>
+</div>
+</div>
+ </div><!--closes bd-->
+
+ <div id="ft">
+ <p class="first">Copyright © 2009 Yahoo! Inc. All rights reserved.</p>
+ <p><a href="http://privacy.yahoo.com/privacy/us/devel/index.html">Privacy Policy</a> -
+ <a href="http://docs.yahoo.com/info/terms/">Terms of Service</a> -
+ <a href="http://docs.yahoo.com/info/copyright/copyright.html">Copyright Policy</a> -
+ <a href="http://careers.yahoo.com/">Job Openings</a></p>
+ </div>
+</div>
+<script language="javascript">
+var yuiConfig = {base:"../../build/", timeout: 10000, filter:"debug", logInclude: {imageloader:true, example:true}};
+</script>
+<script src="../../assets/syntax.js"></script>
+<script src="../../assets/dpSyntaxHighlighter.js"></script>
+<script language="javascript">
+dp.SyntaxHighlighter.HighlightAll('code');
+</script>
+</body>
+</html>