原帖地址: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
相关资源:MooTools1.4中文PDF手册 MooTools-Core-1.5.1.js