# Yahoo! UI Library

### imageloader 3.0.0

Yahoo! UI Library > imageloader > ImgLoadGroup
Search:
Filters Show Private Show Protected Show Deprecated

## Class ImgLoadGroup - extends Base

A group for images. A group can have one time limit and a series of triggers. Thus the images belonging to this group must share these constraints.

### Constructor

ImgLoadGroup `( )`

### Properties

#### _areFoldTriggersSet - `private Boolean`

Boolean tracking whether the window scroll and window resize triggers have been set if this is a fold group.

#### _classImageEls - `private Array`

DOM elements having the class name that is associated with this group. Elements are stored during the `_foldCheck` function and reused later during any subsequent `_foldCheck` calls - gives a slight performance improvement when the page fold is repeatedly checked.

#### _className - `private String`

Keep the CSS class name in a member variable for ease and speed.

#### _imgObjs - `private Object`

Collection of images (`Y.ImgLoadImgObj` objects) registered with this group, keyed by DOM id.

#### _maxKnownHLimit - `private Int`

The maximum pixel height of the document that has been made visible. During fold checks, if the user scrolls up then there's no need to check for newly exposed images.

#### _timeout - `private Object`

Timeout object to keep a handle on the time limit.

#### _triggers - `private Array`

Collection of triggers for this group. Keeps track of each trigger's event handle, as returned from `Y.on`.

#### Properties inherited from Attribute:

``

#### Properties inherited from Base:

`name`

### Methods

#### _clearTriggers

`private void _clearTriggers ( )`
Clears the timeout and all triggers associated with the group.

#### _fetchByClass

`private void _fetchByClass ( )`
Finds all elements in the DOM with the class name specified in the group. Removes the class from the element in order to let the style definitions trigger the image fetching.

#### _foldCheck

`private void _foldCheck ( )`
Checks the position of each image in the group. If any part of the image is within the specified distance (`foldDistance`) of the client viewport, the image is fetched immediately.

#### _getFetchTimeout

`private Function _getFetchTimeout ( )`
Returns the group's `fetch` method, with the proper closure, for use with `setTimeout`.

Returns: `Function`
  group's `fetch` method

#### _init

`private void _init ( )`
Initialize all private members needed for the group.

#### _onloadTasks

`private void _onloadTasks ( )`
Performs necessary setup at domready time. Initiates time limit for group; executes the fold check for the images.

#### _setFoldTriggers

`private void _setFoldTriggers ( )`
Sets the window scroll and window resize triggers for any group that is fold-conditional (i.e., has a fold distance set).

#### addCustomTrigger

`void addCustomTrigger ( name , obj )`
Adds a custom event trigger to the group.

Parameters:
  `name <String>` The name of the event
  `obj <Object>` The object on which to attach the event. `obj` is optional - by default the event is attached to the `Y` instance

Chainable: This method is chainable.

#### addTrigger

`void addTrigger ( obj , type )`
Adds a trigger to the group. Arguments are passed to `Y.on`.

Parameters:
  `obj <Object>` The DOM object to attach the trigger event to
  `type <String>` The event type

Chainable: This method is chainable.

#### fetch

`void fetch ( )`
Displays the images in the group. This method is called when a trigger fires or the time limit expires; it shouldn't be called externally, but is not private in the rare event that it needs to be called immediately.

#### registerImage

`Object registerImage ( * )`
Registers an image with the group. Arguments are passed through to a `Y.ImgLoadImgObj` constructor; see that class' attribute documentation for detailed information. "`domId`" is a required attribute.

Parameters:
  `* <Object>` A configuration object literal with attribute name/value pairs (passed through to a `Y.ImgLoadImgObj` constructor)

Returns: `Object`
  `Y.ImgLoadImgObj` that was registered

#### Methods inherited from EventTarget:

`_getType, _parseType, addTarget, after, before, bubble, detach, detachAll, fire, getEvent, on, publish, removeTarget, subscribe, unsubscribe, unsubscribeAll`

#### Methods inherited from Attribute:

`_addAttrs, _addLazyAttr, _defAttrChangeFn, _fireAttrChange, _getAttr, _getAttrInitVal, _getAttrs, _getStateVal, _isLazyAttr, _normAttrVals, _protectAttrs, _set, _setAttr, _setAttrs, _setAttrVal, _setStateVal, addAttr, addAttrs, attrAdded, get, getAttrs, modifyAttr, removeAttr, reset, set, setAttrs`

#### Methods inherited from Base:

`_aggregateAttrs, _defDestroyFn, _defInitFn, _destroyHierarchy, _filterAttrCfs, _getAttrCfgs, _getClasses, _initHierarchy, _initHierarchyData, destroy, init, toString`

### Events

#### classNameChange

`classNameChange ( event )`
Fires when the value for the configuration attribute 'className' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.

Parameters:
  `event <Event.Facade>` An Event Facade object with the following attribute specific properties added:
  prevVal
    The value of the attribute, prior to it being set
  newVal
    The value the attribute is to be set to
  attrName
    The name of the attribute being set
  subAttrName
    If setting a property within the attribute's value, the name of the sub-attribute property being set

#### foldDistanceChange

`foldDistanceChange ( event )`
Fires when the value for the configuration attribute 'foldDistance' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.

Parameters:
  `event <Event.Facade>` An Event Facade object with the following attribute specific properties added:
  prevVal
    The value of the attribute, prior to it being set
  newVal
    The value the attribute is to be set to
  attrName
    The name of the attribute being set
  subAttrName
    If setting a property within the attribute's value, the name of the sub-attribute property being set

#### nameChange

`nameChange ( event )`
Fires when the value for the configuration attribute 'name' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.

Parameters:
  `event <Event.Facade>` An Event Facade object with the following attribute specific properties added:
  prevVal
    The value of the attribute, prior to it being set
  newVal
    The value the attribute is to be set to
  attrName
    The name of the attribute being set
  subAttrName
    If setting a property within the attribute's value, the name of the sub-attribute property being set

#### timeLimitChange

`timeLimitChange ( event )`
Fires when the value for the configuration attribute 'timeLimit' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.

Parameters:
  `event <Event.Facade>` An Event Facade object with the following attribute specific properties added:
  prevVal
    The value of the attribute, prior to it being set
  newVal
    The value the attribute is to be set to
  attrName
    The name of the attribute being set
  subAttrName
    If setting a property within the attribute's value, the name of the sub-attribute property being set

#### Events inherited from Base:

`destroy, destroyedChange, init, initializedChange,`

### Configuration Attributes

#### className `- String`

Class name that will identify images belonging to the group. This class name will be removed from each element in order to fetch images. This class should have, in its CSS style definition, "`background:none !important;`".

#### foldDistance `- Number`

Distance below the fold for which images are loaded. Images are not loaded until they are at most this distance away from (or above) the fold. This check is performed at page load (domready) and after any window scroll or window resize event (until all images are loaded).

#### name `- String`

Name for the group. Only used to identify the group in logging statements.

#### timeLimit `- Number`

Time limit, in seconds, after which images are fetched regardless of trigger events.

#### Configuration attributes inherited from Base:

`destroyed, initialized,`

Copyright © 2009 Yahoo! Inc. All rights reserved.