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

原作者：我佛山人

?

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

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

????????//創(chuàng)建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標(biāo)簽的屬性
????????delete?properties.onload;?delete?properties.check;?delete?properties.document;

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

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

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

????//樣式資源的加載
????css:?function(source,?properties)????{
????????//創(chuàng)建link?Element,設(shè)置屬性并插入到當(dāng)前文檔頭部
????????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);
????????//創(chuàng)建Image對(duì)象
????????var?image?=?new?Image();
????????//如果Image對(duì)象無法Element化,創(chuàng)建img?Element
????????var?element?=?$(image)?||?new?Element('img');
????????//遍歷處理load,abort和error事件
????????['load',?'abort',?'error'].each(function(name)????{
????????????//為當(dāng)前事件加上on前綴
????????????var?type?=?'on'?+?name;
????????????//從屬性集中讀取事件
????????????var?event?=?properties[type];
????????????//刪除屬性集中的事件成員
????????????delete?properties[type];
????????????//為image對(duì)象綁定事件
????????????image[type]?=?function()????{
????????????????//如果對(duì)象不存在,退出
????????????????if?(!image)?return;
????????????????//如果存在父節(jié)點(diǎn)
????????????????if?(!element.parentNode)????{
????????????????????//設(shè)置寬度
????????????????????element.width?=?image.width;
????????????????????//設(shè)置高度
????????????????????element.height?=?image.height;
????????????????}
????????????????//銷毀對(duì)象及事件
????????????????image?=?image.onload?=?image.onabort?=?image.onerror?=?null;
????????????????//延時(shí)執(zhí)行事件
????????????????event.delay(1,?element,?element);
????????????????//延時(shí)觸發(fā)事件
????????????????element.fireEvent(name,?element,?1);
????????????};
????????});
????????//設(shè)置圖片路徑
????????image.src?=?element.src?=?source;
????????//如果圖片加載完成,延時(shí)執(zhí)行onload事件
????????if?(image?&&?image.complete)????image.onload.delay(1);
????????//設(shè)置img標(biāo)簽屬性并返回Element的引用
????????return?element.setProperties(properties);
????},

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

?

?

轉(zhuǎn)載于:https://www.cnblogs.com/maapaa/articles/mootools-s-49.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。