[转帖]Mootools源码分析-49 -- Asset
原帖地址: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相关推荐
- [转帖]Mootools源码分析-02 -- Utils
原帖地址:http://space.flash8.net/space/?uid-18713-action-viewspace-itemid-400118 原作者:我佛山人 //检查对象是否已经定义或者 ...
- [转帖]Mootools源码分析-04 -- Array
//对数组的扩展实现Array.implement({ //迭代方法,call的使用 forEach: function(fn, bind) {for (var i =0, l =this.lengt ...
- [转帖]Mootools源码分析-03 -- Hash
//哈希表,Native化作为内置对象var Hash =new Native({ //族名,类名,用于$type方法的精准类型判断 name: 'Hash', initialize: functio ...
- MooTools 1.4 源码分析 - (关于Core、Type等模块分析)
MooTools由1.3升级到1.4的过程中,这几个核心模块只有String模块和Event模块(现在已修改为DOMEvent)做了比较大的修改,这几个模块源码的分析参考 棍子上的萝卜 所写的 ...
- ruby-0.49源码分析
今天想想,读读ruby0.49的源码. 用C写东西,那是太慢了.真要干活,还是用perl或者ruby. 现在时间充足,就相看看ruby0.49.收到了王亚刚写的gcc源码分析的书,他的版本太高,感觉还 ...
- ceph bluestore 源码分析:ceph-osd内存查看方式及控制源码分析
文章目录 内存查看 内存控制 内存控制源码分析 通过gperftools接口获取osd进程实际内存 动态设置cache大小 动态调整cache比例 trim释放内存 本文通过对ceph-osd内存查看 ...
- EOS智能合约:system系统合约源码分析
链客,专为开发者而生,有问必答! 此文章来自区块链技术社区,未经允许拒绝转载. eosio.system 概览 笔者使用的IDE是VScode,首先来看eosio.system的源码结构.如下图所示. ...
- Python3.5源码分析-内存管理
Python3源码分析 本文环境python3.5.2. 参考书籍<<Python源码剖析>> python官网 Python3的内存管理概述 python提供了对内存的垃圾收 ...
- java观察者模式类图_设计模式(十八)——观察者模式(JDK Observable源码分析)...
1 天气预报项目需求,具体要求以下: 1) 气象站能够将天天测量到的温度,湿度,气压等等以公告的形式发布出去(好比发布到本身的网站或第三方).java 2) 须要设计开放型 API,便于其余第三方也能 ...
最新文章
- 使用 mysql workbench 建议
- linux网络编程-socket(2)
- C++11系列学习之五-------decltype
- 安兔兔跑分可信吗_安兔兔安卓手机跑分性能榜公布:第一名实至名归?
- 【操作系统】页置换算法
- 查看ipad网页代码 iPad Quick Tip – View Page Source In iPad Safari
- CentOS 7 安装MongoDB 4.0
- HDU2011 多项式求和【数列】
- Twemproxy安装问题与不支持的操作明细
- html学校图标的代码,学校查询网代码查询_小学学校的代码如何查询?
- 反意疑问句及其回答用法归纳+习题讲解
- DT|一文看完企业绩效管理系统产品(EPM)的前世今生
- cnn app for android phones,Freedom Apk Download for Android Phones / Tablets Latest Version
- RPLIDAR思岚雷达学习记录--1--初识a1并跑通
- 链游Illuvium即将上线:自动战斗P2E NFT收藏游戏
- ssh 配置使用密钥登录
- web期末大作业:基于html+css+js制作 学校班级网页制作----校园运动会 4页
- 《小兵大战》运营日志
- python 优先级继承_孤荷凌寒自学python第二十二天python类的继承
- [19考研]政治英语数学专业课 复习书籍推荐!