+ The ImageLoader Utility 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. +
+ +
+ Using CSS Class Names to Load Images
+ +
+ Instead of registering specific image ids/URLs with a group, you can simply tag the group with a CSS class.
+ The group will later use this class name to identify which DOM elements belong to the group.
+ Each group should have one corresponding class. Each class must have a background:none CSS definition
+ at the top of the page, as in this example:
+
CSS
+.yui3-imgload-maingroup,
+.yui3-imgload-duogroup,
+.yui3-imgload-scrollgroup{
+ background:none !important;
+}
+
+ HTML
+<div class='topmain yui-imgload-maingroup' id='topmain' style='background-image:url("http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small/museum.jpg");'></div>
+<div class='duo1 yui-imgload-duogroup' id='duo1' style='background-image:url("http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small/uluru.jpg");'></div>
+<div class='duo2 yui-imgload-duogroup' id='duo2' style='background-image:url("http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small/katatjuta.jpg");'></div>
+<div class='scroll'>
+ <img id='scrollImg' class='yui-imgload-scrollgroup' style='background-image:url("http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small/morraine.jpg");' src='http://l.yimg.com/a/i/us/tr/b/1px_trans.gif' width='100' height='72' />
+</div>
+
+
+
++ A few things to note. First, the images have class names matching those in the style definitions above. +
+ +
+ Second, the image URL is set in the background-image of the elements. The background:none
+ defined earlier in the CSS will be removed by the ImageLoader Utility JavaScript when the images are eventually loaded.
+
+ Third, since the <img> element displays its images through the background-image,
+ its size won't change when the image is loaded. Therefore the width/height needs to be set in the HTML.
+ And since that gives the image a substantial size, the browsers would show a missing-image icon if the src
+ attribute were not specified. Therefore we need to set one; a transparent one so that the background image will show through.
+
+ This brings up an important limitation with this approach: you cannot alter the natural size of the image.
+ Because the image is displayed as a background image, the browser will not resize the image according to the
+ width/height of the <img> element.
+
+ Now let's turn to the JavaScript. Since the image URLs are already specified in the HTML, we don't need them in the JS. + All each group needs to know is the CSS class name that will identify the images. +
+ +var mainGroup = new Y.ImgLoadGroup({ name: 'group 1', timeLimit: 2, className: 'yui-imgload-maingroup' });
+mainGroup.addTrigger('#topmain', 'mouseover');
+
+var duoGroup = new Y.ImgLoadGroup({ name: 'group 2', timeLimit: 4, className: 'yui-imgload-duogroup' });
+duoGroup.addTrigger('#duo1', 'mouseover').addTrigger('#duo2', 'click');
+
+var scrollGroup = new Y.ImgLoadGroup({ name: 'group 3', className: 'yui-imgload-scrollgroup' });
+scrollGroup.addTrigger(window, 'scroll');
+
+
++ Note that you are free to combine this class-name approach with the other. + The same group can have some images identified by class name and others by registering ids/URLs. +