[转帖]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);
    }
});