原帖地址: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相关推荐

  1. [转帖]Mootools源码分析-02 -- Utils

    原帖地址:http://space.flash8.net/space/?uid-18713-action-viewspace-itemid-400118 原作者:我佛山人 //检查对象是否已经定义或者 ...

  2. [转帖]Mootools源码分析-04 -- Array

    //对数组的扩展实现Array.implement({ //迭代方法,call的使用 forEach: function(fn, bind) {for (var i =0, l =this.lengt ...

  3. [转帖]Mootools源码分析-03 -- Hash

    //哈希表,Native化作为内置对象var Hash =new Native({ //族名,类名,用于$type方法的精准类型判断 name: 'Hash', initialize: functio ...

  4. MooTools 1.4 源码分析 - (关于Core、Type等模块分析)

        MooTools由1.3升级到1.4的过程中,这几个核心模块只有String模块和Event模块(现在已修改为DOMEvent)做了比较大的修改,这几个模块源码的分析参考 棍子上的萝卜 所写的 ...

  5. ruby-0.49源码分析

    今天想想,读读ruby0.49的源码. 用C写东西,那是太慢了.真要干活,还是用perl或者ruby. 现在时间充足,就相看看ruby0.49.收到了王亚刚写的gcc源码分析的书,他的版本太高,感觉还 ...

  6. ceph bluestore 源码分析:ceph-osd内存查看方式及控制源码分析

    文章目录 内存查看 内存控制 内存控制源码分析 通过gperftools接口获取osd进程实际内存 动态设置cache大小 动态调整cache比例 trim释放内存 本文通过对ceph-osd内存查看 ...

  7. EOS智能合约:system系统合约源码分析

    链客,专为开发者而生,有问必答! 此文章来自区块链技术社区,未经允许拒绝转载. eosio.system 概览 笔者使用的IDE是VScode,首先来看eosio.system的源码结构.如下图所示. ...

  8. Python3.5源码分析-内存管理

    Python3源码分析 本文环境python3.5.2. 参考书籍<<Python源码剖析>> python官网 Python3的内存管理概述 python提供了对内存的垃圾收 ...

  9. java观察者模式类图_设计模式(十八)——观察者模式(JDK Observable源码分析)...

    1 天气预报项目需求,具体要求以下: 1) 气象站能够将天天测量到的温度,湿度,气压等等以公告的形式发布出去(好比发布到本身的网站或第三方).java 2) 须要设计开放型 API,便于其余第三方也能 ...

最新文章

  1. 使用 mysql workbench 建议
  2. linux网络编程-socket(2)
  3. C++11系列学习之五-------decltype
  4. 安兔兔跑分可信吗_安兔兔安卓手机跑分性能榜公布:第一名实至名归?
  5. 【操作系统】页置换算法
  6. 查看ipad网页代码 iPad Quick Tip – View Page Source In iPad Safari
  7. CentOS 7 安装MongoDB 4.0
  8. HDU2011 多项式求和【数列】
  9. Twemproxy安装问题与不支持的操作明细
  10. html学校图标的代码,学校查询网代码查询_小学学校的代码如何查询?
  11. 反意疑问句及其回答用法归纳+习题讲解
  12. DT|一文看完企业绩效管理系统产品(EPM)的前世今生
  13. cnn app for android phones,Freedom Apk Download for Android Phones / Tablets Latest Version
  14. RPLIDAR思岚雷达学习记录--1--初识a1并跑通
  15. 链游Illuvium即将上线:自动战斗P2E NFT收藏游戏
  16. ssh 配置使用密钥登录
  17. web期末大作业:基于html+css+js制作 学校班级网页制作----校园运动会 4页
  18. 《小兵大战》运营日志
  19. python 优先级继承_孤荷凌寒自学python第二十二天python类的继承
  20. [19考研]政治英语数学专业课 复习书籍推荐!

热门文章

  1. 数学--图论--莫比乌斯线性筛模板
  2. 玩转GIT系列之【git submodule update出错提示子模组未对路径注册】
  3. [机器学习] Boosting算法1 --- AdaBoost
  4. 在sts中springboot工程的maven解析异常处理
  5. 如何设置Jupiter Notebook服务器并从任何地方访问它(Windows 10)
  6. 立即学习AI:03-使用卷积神经网络进行马铃薯分类
  7. 如何正确选择合适的贷款机构,避免征信花掉?
  8. 如果没有网上购物,商铺价格会不会更高?
  9. 李嘉诚再卖地3800亩,房价要变天了吗?
  10. 单片机小白学步系列(〇)序