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