assets.md

来自「一款开源强大的javascript控件」· Markdown 代码 · 共 142 行

Hash: Assets {#Assets}
=======================

提供在页面中动态加载和管理JavaScript, CSS和图片文件的功能


Assets 方法: javascript {#Assets:javascript}
----------------------------------------------

向页面的head内注入一个script标签, 并指定它的src

###	语法:

	var myScript = Asset.javascript(source[, properties]);

###	参数:

1. source     - (*string*) JavaScript文件的路径
2. properties - (*object*, 可选项) 其他用于附加script标签上的属性

###	返回值:

* (*element*) script元素

###	示例:

	var myScript = new Asset.javascript('/scripts/myScript.js', {id: 'myScript'});



Assets 方法: css {#Assets:css}
--------------------------------

向页面中注入一个css样式文件

###	语法:

	var myCSS = new Asset.css(source[, properties]);

###	参数:

1. source     - (*string*) CSS文件的路径
2. properties - (*object*) 其他附加到link标签上的属性

###	返回值:

* (*element*) link元素

###	示例:

	var myCSS = new Asset.css('/css/myStyle.css', {
		id: 'myStyle', 
		title: 'myStyle'
	});



Assets 方法: image {#Assets:image}
------------------------------------

预加载一个图片文件

###	语法:

	var myImage = new Asset.image(source[, properties]);

###	参数:

1. source     - (*string*) 图片路径
2. properties - (*object*) 其他附加到img标签上的属性, 以及三个事件属性: onload/onerror/onabout

###	返回值:

* (*element*) img元素

###	示例:

	var myImage = new Asset.image('/images/myImage.png', {
		id: 'myImage', 
		title: 'myImage', 
		onload: myFunction
	});

###	备注:

- 加载的图片只是在内存中, 并未注入到页面DOM中
- 注意: 不要在该方法返回的元素上使用addEvent来添加load/error/abort事件, 而应在properties参数中指定onload/onerror/onabort属性



Assets 方法: images {#Assets:images}
--------------------------------------

预加载一组图片文件

###	语法:

	var myImages = new Asset.images(source[, options]);

###	参数:

1. sources - (*mixed*) 一个或一组代表图片路径的字符串
2. options - (*object*, 可选项) 参见下列可选项:

## 可选项:

### onComplete

* (*function*) 当所有图片加载完成后触发

#### 标识:

	onComplete()

### onProgress

* (*function*) 每加载完一个图片后触发一次

#### 标识:

	onProgress(counter, index)

#### 参数:

1. counter - (*number*) 已加载完成的图片数
2. index   - (*number*) 当前正在加载的图片索引号

#### 返回值:

* (*array*) [Elements][]

#### 示例:

	var myImages = new Asset.images(['/images/myImage.png', '/images/myImage2.gif'], {
		onComplete: function(){
			alert('All images loaded!');
		}
	});



[Elements]: /Element/Element#Elements