原帖地址：http://space.flash8.net/space/?uid-18713-action-viewspace-itemid-410355

原作者：我佛山人

?

代碼 //腳本,樣式和圖片的資源加載
var?Asset?=?new?Hash({

????//腳本資源的加載
????javascrīpt:?function(source,?properties)????{
????????//合并屬性項
????????properties?=?$extend({
????????????//腳本加載完成后的事件通知
????????????onload:?$empty,
????????????//腳本標簽所屬的DOM
????????????document:?document,
????????????//約束檢查
????????????check:?$lambda(true)
????????},?properties);

????????//創建scrīpt?Element,指定路徑及腳本類型
????????var?scrīpt?=?new?Element('scrīpt',?{'src':?source,?'type':?'text/javascrīpt'});

????????//綁定腳本加載后的onload事件
????????var?load?=?properties.onload.bind(scrīpt),?check?=?properties.check,?doc?=?properties.document;
????????//刪除非scrīpt標簽的屬性
????????delete?properties.onload;?delete?properties.check;?delete?properties.document;

????????//添加事件監聽
????????scrīpt.addEvents({
????????????//加載完成事件
????????????load:?load,
????????????//加載狀態更改事件
????????????readystatechange:?function()????{
????????????????//如果狀態碼為loaded或complete中的一種,表明加載完成
????????????????if?(['loaded',?'complete'].contains(this.readyState))????load();
????????????}
????????????//設置標簽屬性
????????}).setProperties(properties);

????????//對Safari的hack處理,需要提供check方法手動檢查有否加載完成
????????if?(Browser.Engine.webkit419)?var?checker?=?(function()????{
????????????//嘗試執行check方法,如果出錯或檢查未加載完成,退出
????????????if?(!$try(check))????return;
????????????//清除計時器
????????????$clear(checker);
????????????//加載完成通知
????????????load();
????????????//每50毫秒執行一次調用
????????}).periodical(50);

????????//插入scrīpt標簽到當前文檔的頭部
????????return?scrīpt.inject(doc.head);
????},

????//樣式資源的加載
????css:?function(source,?properties)????{
????????//創建link?Element,設置屬性并插入到當前文檔頭部
????????return?new?Element('link',?$merge({
????????????'rel':?'stylesheet',?'media':?'screen',?'type':?'text/css',?'href':?source
????????},?properties)).inject(document.head);
????},

????//圖片資源的加載
????image:?function(source,?properties)????{
????????//合并屬性
????????properties?=?$merge({
????????//加載完成事件
????????'onload':?$empty,
????????//取消加載事件
????????'onabort':?$empty,
????????//加載失敗事件
????????'onerror':?$empty
????????},?properties);
????????//創建Image對象
????????var?image?=?new?Image();
????????//如果Image對象無法Element化,創建img?Element
????????var?element?=?$(image)?||?new?Element('img');
????????//遍歷處理load,abort和error事件
????????['load',?'abort',?'error'].each(function(name)????{
????????????//為當前事件加上on前綴
????????????var?type?=?'on'?+?name;
????????????//從屬性集中讀取事件
????????????var?event?=?properties[type];
????????????//刪除屬性集中的事件成員
????????????delete?properties[type];
????????????//為image對象綁定事件
????????????image[type]?=?function()????{
????????????????//如果對象不存在,退出
????????????????if?(!image)?return;
????????????????//如果存在父節點
????????????????if?(!element.parentNode)????{
????????????????????//設置寬度
????????????????????element.width?=?image.width;
????????????????????//設置高度
????????????????????element.height?=?image.height;
????????????????}
????????????????//銷毀對象及事件
????????????????image?=?image.onload?=?image.onabort?=?image.onerror?=?null;
????????????????//延時執行事件
????????????????event.delay(1,?element,?element);
????????????????//延時觸發事件
????????????????element.fireEvent(name,?element,?1);
????????????};
????????});
????????//設置圖片路徑
????????image.src?=?element.src?=?source;
????????//如果圖片加載完成,延時執行onload事件
????????if?(image?&&?image.complete)????image.onload.delay(1);
????????//設置img標簽屬性并返回Element的引用
????????return?element.setProperties(properties);
????},

????//批量圖片加載
????images:?function(sources,?options)????{
????????//合并參數
????????options?=?$merge({
????????????//圖片集加載完成
????????????onComplete:?$empty,
????????????//圖片集加載過程
????????????onProgress:?$empty
????????},?options);
????????//使source數組化,以兼容只有一個圖片時不傳數組的情況
????????if?(!sources.push)????sources?=?[sources];
????????//圖片數組,項類型為Element
????????var?images?=?[];
????????//圖片加載數量標記
????????var?counter?=?0;
????????//遍歷加載
????????sources.each(function(source)????{
????????????//使用Asset.image加載(new屬多余,可省略)
????????????var?img?=?new?Asset.image(source,?{
????????????????//添加加載完成事件監聽,以實現進度通知及加載完成通知
????????????????'onload':?function()????{
????????????????????//進度通知,傳送當前已加載數及當前圖片的順序索引值
????????????????????options.onProgress.call(this,?counter,?sources.indexOf(source));
????????????????????//計數器加1
????????????????????counter++;
????????????????????//如果計數器與source數組長度一致,表明全部加載完成,調用加載完成事件通知
????????????????????if?(counter?==?sources.length)?options.onComplete();
????????????????}
????????????});
????????????//加載到數組
????????????images.push(img);
????????});
????????//Elements化
????????return?new?Elements(images);
????}
});

?

?

轉載于:https://www.cnblogs.com/maapaa/articles/mootools-s-49.html

總結

以上是生活随笔為你收集整理的[转帖]Mootools源码分析-49 -- Asset的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。