Hash: Assets

JavaScript、CSS、画像などを動的に読み込み・管理するためのメソッドを提供します。

Assetsメソッド: javascript

documentのheadにscriptタグを挿入し、srcを指定できます。

構文:

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

引数:

1. source - (文字列) 読み込むJavaScriptファイルの場所。
2. properties - (オブジェクト, オプション) インクルードされるscript要素に適用される追加の属性。

戻り値:

• (要素) 新しいscript要素。

例:

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

Assetsメソッド: css

ページにCSSファイルを挿入します。

構文:

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

引数:

1. source - (文字列) CSSファイルへのパス。
2. properties - (オブジェクト) link要素に追加したい属性。

戻り値:

• (要素) 新しいlink要素。

例:

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

Assetsメソッド: image

画像を読み込んでから、img要素を返します。

構文:

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

引数:

1. source - (文字列) 画像ファイルまでのパス。
2. properties - (オブジェクト) img要素に追加したい属性。onload、onerror、onabortイベントも指定できます。

戻り値:

• (要素) 新しいHTML img要素。

例:

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

注意点:

• ページに画像は挿入されません。
• 警告: 返される要素のload・error・abortにaddEventを使わないで下さい。イベントを添附する場合は、propertiesオプションのonload・onerror・onabortに添附してください。

Assetsメソッド: images

複数の画像を配列(文字列として)をあらかじめ読み込んでから、img要素の配列を返します。ページに挿入はされません。

構文:

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

引数:

1. sources - (いろいろ) 画像ファイルへのパスからなる配列。
2. options - (オブジェクト, オプション) 以下を参照のこと。

オプション:

onComplete

• (関数) すべての画像ファイルが読み込まれてから発生します。

表記:

onComplete()

onProgress

• (関数) 一つの画像が読み込まれると発生します。

表記:

onProgress(counter, index)

引数:

1. counter - (数) 読み込まれた画像の数。
2. index - (数) 読み込まれた画像のインデックス。

戻り値:

• (配列) Elementsコレクション。

例:

var myImages = new Asset.images(['/images/myImage.png', '/images/myImage2.gif'], {

    onComplete: function(){
        alert('All images loaded!');
    }
});