imageloader.js

这是YUI的源码及相关示例。里面有很多很炫的Javascript效果。

/**
 * Checks the position of each image in the group. If any part of the image is within the client viewport, shows the image immediately.
 * @method _foldCheck
 * @private
 */
YAHOO.util.ImageLoader.group.prototype._foldCheck = function() {
	var scrollTop = (document.compatMode != 'CSS1Compat') ? document.body.scrollTop : document.documentElement.scrollTop;
	var viewHeight = YAHOO.util.Dom.getViewportHeight();
	var hLimit = scrollTop + viewHeight;
	var scrollLeft = (document.compatMode != 'CSS1Compat') ? document.body.scrollLeft : document.documentElement.scrollLeft;
	var viewWidth = YAHOO.util.Dom.getViewportWidth();
	var wLimit = scrollLeft + viewWidth;
	for (var id in this._imgObjs) {
		if (YAHOO.lang.hasOwnProperty(this._imgObjs, id)) {
			var elPos = YAHOO.util.Dom.getXY(this._imgObjs[id].domId);
			if (elPos[1] < hLimit && elPos[0] < wLimit) {
				this._imgObjs[id].fetch();
			}
		}
	}
	// and by class
	if (this.className) {
		this._classImageEls = YAHOO.util.Dom.getElementsByClassName(this.className);
		for (var i=0, len = this._classImageEls.length; i < len; i++) {
			var elPos = YAHOO.util.Dom.getXY(this._classImageEls[i]);
			if (elPos[1] < hLimit && elPos[0] < wLimit) {
				YAHOO.util.Dom.removeClass(this._classImageEls[i], this.className);
			}
		}
	}
};

/**
 * 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
 * @method _fetchByClass
 * @private
 */
YAHOO.util.ImageLoader.group.prototype._fetchByClass = function() {
	if (! this.className) {
		return;
	}

	// this._classImageEls may have been set during _foldCheck
	if (this._classImageEls === null) {
		this._classImageEls = YAHOO.util.Dom.getElementsByClassName(this.className);
	}
	YAHOO.util.Dom.removeClass(this._classImageEls, this.className);
};


/**
 * Base class for image objects to be registered with the groups
 * @class YAHOO.util.ImageLoader.imgObj
 * @constructor
 * @param {String}	domId	HTML DOM id of the image element
 * @param {String}	url	URL for the image
 */
YAHOO.util.ImageLoader.imgObj = function(domId, url) {
	/**
	 * HTML DOM id of the image element
	 * @property domId
	 * @type String
	 */
	this.domId = domId;

	/**
	 * URL for the image
	 * @property url
	 * @type String
	 */
	this.url = url;

	/**
	 * Pixel width of the image. Will be set as a "width" attribute after the image is fetched.
	 * Detaults to the natural width of the image.
	 * Only appropriate with src images
	 * @property width
	 * @type Int
	 */
	this.width = null;

	/**
	 * Pixel height of the image. Will be set as a "height" attribute after the image is fetched.
	 * Detaults to the natural height of the image.
	 * Only appropriate with src images
	 * @property height
	 * @type Int
	 */
	this.height = null;

	/**
	 * Whether the style.visibility should be set to "visible" after the image is fetched.
	 * Used when setting src images as visibility:hidden prior to image fetching
	 * @property setVisible
	 * @type Boolean
	 */
	this.setVisible = false;

	/**
	 * Whether the image has already been fetched. In the case of a foldCondional group, keeps track for when the trigger is fired so images aren't fetched twice
	 * @property _fetched
	 * @type Boolean
	 * @private
	 */
	this._fetched = false;
};

/**
 * Displays the image; puts the URL into the DOM
 * @method fetch
 */
YAHOO.util.ImageLoader.imgObj.prototype.fetch = function() {
	if (this._fetched) {
		return;
	}
	var el = document.getElementById(this.domId);
	if (! el) {
		return;
	}
	this._applyUrl(el);

	if (this.setVisible) {
		el.style.visibility = 'visible';
	}
	if (this.width) {
		el.width = this.width;
	}
	if (this.height) {
		el.height = this.height;
	}
	this._fetched = true;
};

/**
 * Inserts the image URL into the DOM so that the image is displayed.
 * Must be overridden by child class
 * @method _applyUrl
 * @param {Object}	el	HTML DOM element
 * @private
 */
YAHOO.util.ImageLoader.imgObj.prototype._applyUrl = function(el) {
};

/**
 * Background image object. A background image is one whose URL is specified by "background-image" in the element's style
 * @class YAHOO.util.ImageLoader.bgImgObj
 * @constructor
 * @extends YAHOO.util.ImageLoader.imgObj
 * @param {String}	domId	HTML DOM id of the image element
 * @param {String}	url	URL for the image
 */
YAHOO.util.ImageLoader.bgImgObj = function(domId, url) {
	YAHOO.util.ImageLoader.bgImgObj.superclass.constructor.call(this, domId, url);
};

YAHOO.lang.extend(YAHOO.util.ImageLoader.bgImgObj, YAHOO.util.ImageLoader.imgObj);

/**
 * Inserts the image URL into the DOM so that the image is displayed.
 * Sets style.backgroundImage
 * @method _applyUrl
 * @param {Object}	el	HTML DOM element
 * @private
 */
YAHOO.util.ImageLoader.bgImgObj.prototype._applyUrl = function(el) {
	el.style.backgroundImage = "url('" + this.url + "')";
};

/**
 * Source image object. A source image is one whose URL is specified by a src attribute in the DOM element
 * @class YAHOO.util.ImageLoader.srcImgObj
 * @constructor
 * @extends YAHOO.util.ImageLoader.imgObj
 * @param {String}	domId	HTML DOM id of the image element
 * @param {String}	url	URL for the image
 * @param {Int}	width	pixel width of the image - defaults to image's natural size
 * @param {Int}	height	pixel height of the image - defaults to image's natural size
 */
YAHOO.util.ImageLoader.srcImgObj = function(domId, url, width, height) {
	YAHOO.util.ImageLoader.srcImgObj.superclass.constructor.call(this, domId, url);
	this.width = width;
	this.height = height;
};

YAHOO.lang.extend(YAHOO.util.ImageLoader.srcImgObj, YAHOO.util.ImageLoader.imgObj);

/**
 * Inserts the image URL into the DOM so that the image is displayed.
 * Sets src
 * @method _applyUrl
 * @param {Object}	el	HTML DOM element
 * @private
 */
YAHOO.util.ImageLoader.srcImgObj.prototype._applyUrl = function(el) {
	el.src = this.url;
};

/**
 * PNG background image object. A PNG background image is one whose URL is specified through AlphaImageLoader or by "background-image" in the element's style
 * @class YAHOO.util.ImageLoader.pngBgImgObj
 * @constructor
 * @extends YAHOO.util.ImageLoader.imgObj
 * @param {String}	domId	HTML DOM id of the image element
 * @param {String}	url	URL for the image
 * @param {Object}  ailProps The AlphaImageLoader properties to be set for the image
 *                    Valid properties are 'sizingMethod' and 'enabled'
 */
YAHOO.util.ImageLoader.pngBgImgObj = function(domId, url, ailProps) {
	YAHOO.util.ImageLoader.pngBgImgObj.superclass.constructor.call(this, domId, url);

	/**
	 * AlphaImageLoader properties to be set for the image.
	 * Valid properties are "sizingMethod" and "enabled".
	 * @property props
	 * @type Object
	 */
	this.props = ailProps || {};
};

YAHOO.lang.extend(YAHOO.util.ImageLoader.pngBgImgObj, YAHOO.util.ImageLoader.imgObj);

/**
 * Inserts the image URL into the DOM so that the image is displayed.
 * If the browser is determined to be IE6 (or older), sets the AlphaImageLoader src; otherwise sets style.backgroundImage
 * @method _applyUrl
 * @param {Object}	el	HTML DOM element
 * @private
 */
YAHOO.util.ImageLoader.pngBgImgObj.prototype._applyUrl = function(el) {
	if (YAHOO.env.ua.ie && YAHOO.env.ua.ie <= 6) {
		var sizingMethod = (YAHOO.lang.isUndefined(this.props.sizingMethod)) ? 'scale' : this.props.sizingMethod;
		var enabled = (YAHOO.lang.isUndefined(this.props.enabled)) ? 'true' : this.props.enabled;
		el.style.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="' + this.url + '", sizingMethod="' + sizingMethod + '", enabled="' + enabled + '")';
	}
	else {
		el.style.backgroundImage = "url('" + this.url + "')";
	}
};
YAHOO.register("imageloader", YAHOO.util.ImageLoader, {version: "2.6.0", build: "1321"});