Версия 13:02, 26 мая 2010

Содержание

1 Basic Features of the ImageLoader Utility
2 Basic Features of the ImageLoader Utility
- 2.1 ImageLoader with TabView
3 ImageLoader with TabView
- 3.1 Loading Images Below the Fold
4 Loading Images Below the Fold
- 4.1 Using ImageLoader with CSS Class Names
5 Using ImageLoader with CSS Class Names

Basic Features of the ImageLoader Utility

   <source lang="html4strict">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head>

   <meta http-equiv="content-type" content="text/html; charset=utf-8">

<title>Basic Features of the ImageLoader Utility</title> <style type="text/css"> /*margin and padding on body element

 can introduce errors in determining
 element position and are not recommended;
 we turn them off as a foundation for YUI
 CSS treatments. */

body {

 margin:0;
 padding:0;

} </style> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/imageloader/imageloader-min.js"></script>

</head> <body class=" yui-skin-sam">

Basic Features of the ImageLoader Utility

Displayed here are the basic abilities of the <a href="http://developer.yahoo.ru/yui/imageloader/">ImageLoader Utility</a>. Images are loaded only after triggers are fired or time limits are reached.

Hover over each image to show its triggers and its time limit. Try tripping the triggers to see the load reactions. Refresh the page to reset the images.

   <img id="scrollImg" style="visibility:hidden;" />

</body> </html>

 </source>

ImageLoader with TabView

   <source lang="html4strict">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head>

   <meta http-equiv="content-type" content="text/html; charset=utf-8">

<title>ImageLoader with TabView</title> <style type="text/css"> /*margin and padding on body element

 can introduce errors in determining
 element position and are not recommended;
 we turn them off as a foundation for YUI
 CSS treatments. */

body {

 margin:0;
 padding:0;

} </style> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/tabview/assets/skins/sam/tabview.css" /> <script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/imageloader/imageloader-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/element/element-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/tabview/tabview-min.js"></script>

</head> <body class=" yui-skin-sam">

ImageLoader with TabView

Here we demonstrate integrating the <a href="http://developer.yahoo.ru/yui/imageloader/">ImageLoader Utility</a> with the <a href="http://developer.yahoo.ru/yui/tabview/">TabView Control</a>.

Also illustrated are the considerations for the ImageLoader group triggers, as they involve some reasoning on the developer"s part.

Here, each tab contains images and a corresponding ImageLoader group. Triggers are set as mouseover events of each tab.

<html>

demo { width:350px; }
demo .yui-content { padding:20px; } /* pad content container */
demo img { margin-right:20px; }
tabone, #tabtwo, #tabthree { height:80px; }

</style>

<a href="#tabone">Tab One</a>
<a href="#tabtwo">Tab Two</a>
<a href="#tabthree">Tab Three</a>

     <img id="imgOne" src="http://developer.yahoo.ru/yui/docs/assets/examples/exampleimages/small/museum.jpg" />

     <img id="imgTwo" title=""imgTwo"" />
     <img id="imgThree" title=""imgThree"" />

     <img id="imgFour" title=""imgFour"" />
     <img id="imgFive" title=""imgFive"" />

</script> </html>

</body> </html>

 </source>

Loading Images Below the Fold

   <source lang="html4strict">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head>

   <meta http-equiv="content-type" content="text/html; charset=utf-8">

<title>Loading Images Below the Fold</title> <style type="text/css"> /*margin and padding on body element

 can introduce errors in determining
 element position and are not recommended;
 we turn them off as a foundation for YUI
 CSS treatments. */

body {

 margin:0;
 padding:0;

} </style> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/imageloader/imageloader-min.js"></script>

</head> <body class=" yui-skin-sam">

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 <a href="http://developer.yahoo.ru/yui/imageloader/">ImageLoader Utility</a>.

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.

img1Cont, #img5Cont { height:75px; }
img2Cont { height:67px; }
img3Cont { height:53px; }
img4Cont { height:72px; }

</style>

   <img id="img1" />

   <img id="img2" />

   <img id="img3" />

   <img id="img4" />

   <img id="img5" />

* 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>

</body> </html>

 </source>

Using ImageLoader with CSS Class Names

   <source lang="html4strict">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head>

   <meta http-equiv="content-type" content="text/html; charset=utf-8">

<title>Using ImageLoader with CSS Class Names</title> <style type="text/css"> /*margin and padding on body element

 can introduce errors in determining
 element position and are not recommended;
 we turn them off as a foundation for YUI
 CSS treatments. */

body {

 margin:0;
 padding:0;

} </style> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/imageloader/imageloader-min.js"></script>

</head> <body class=" yui-skin-sam">

Using ImageLoader with CSS Class Names

The <a href="http://developer.yahoo.ru/yui/imageloader/">ImageLoader Utility</a> allows you an alternate method of using CSS class names to load images.

Hover over each image to show its triggers and limit. Try tripping the triggers to see the load reactions. Refresh the page to reset the images.

 { background:none !important; }

</style>

   <img id="scrollImg" class="yui-imgload-scrollgroup" style="background-image:url("http://developer.yahoo.ru/yui/docs/assets/examples/exampleimages/small/morraine.jpg");" src="http://us.i1.yimg.ru/us.yimg.ru/i/us/tr/b/1px_trans.gif" width="100" height="72" />

</body> </html>

 </source>

JavaScript DHTML/YUI Library/ImageLoader — различия между версиями

Версия 13:02, 26 мая 2010

Содержание